/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* Keep the animated background property registration out of Tailwind's parser. */
@property --fe-global-bg-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --fe-global-bg-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --fe-global-bg-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --fe-global-bg-alpha {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Video annotation markers on seekbar */
.annotation-marker {
  position: absolute;
  width: 3px;
  height: 100%;
  background-color: #ff0000;
  z-index: 9999 !important;
  pointer-events: none;
  box-shadow: 0 0 2px rgba(255, 0, 0, 0.5);
}

.vjs-progress-holder .annotation-marker,
.vjs-slider .annotation-marker {
  top: 0;
  bottom: 0;
}

/* Annotation mode cursor - works in both normal and fullscreen */
html.annotation-mode-active video,
html.annotation-mode-active .video-js,
html.annotation-mode-active .vjs-tech,
html.annotation-mode-active .vjs-poster,
html.annotation-mode-active .annotation-canvas {
  cursor: crosshair !important;
}

/* Keep normal cursor on seekbar and controls even when annotation mode is active */
html.annotation-mode-active .vjs-control-bar,
html.annotation-mode-active .vjs-progress-control,
html.annotation-mode-active .vjs-progress-holder,
html.annotation-mode-active .vjs-seek-bar,
html.annotation-mode-active .vjs-play-progress,
html.annotation-mode-active .vjs-load-progress,
html.annotation-mode-active .vjs-play-control,
html.annotation-mode-active .vjs-volume-control,
html.annotation-mode-active .vjs-time-control,
html.annotation-mode-active .vjs-fullscreen-control,
html.annotation-mode-active .vjs-menu,
html.annotation-mode-active .vjs-menu-button,
html.annotation-mode-active .vjs-control,
html.annotation-mode-active .vjs-control-bar *,
html.annotation-mode-active .vjs-control * {
  cursor: default !important;
  pointer-events: auto !important;
}

/* Ensure Video.js controls are above canvas */
.vjs-control-bar {
  z-index: 15 !important;
}

.vjs-progress-control,
.vjs-progress-holder,
.vjs-seek-bar {
  z-index: 16 !important;
}

/* Annotation canvas */
.annotation-canvas {
  cursor: default;
  z-index: 10 !important;
}

/* Floating annotation button - normal mode (below header z-50) */
.annotation-pencil-button {
  z-index: 40 !important; /* Lower than header z-50 to stay below when scrolling */
}

/* Normal mode button styling - ensure it stays below header and uses Tailwind classes */
.video-wrapper .annotation-pencil-button {
  z-index: 40 !important; /* Keep below header (z-50) */
  position: absolute !important;
  /* Don't override other styles - let Tailwind classes handle background, color, size, etc. */
}

/* Ensure button is visible in fullscreen - only use high z-index and inline styles in fullscreen */
.video-js.vjs-fullscreen .annotation-pencil-button,
.video-wrapper:fullscreen .annotation-pencil-button {
  z-index: 10000 !important; /* High z-index only in fullscreen */
  position: absolute !important;
  background-color: rgb(79, 70, 229) !important; /* bg-indigo-600 */
  color: white !important;
  width: 3rem !important; /* w-12 */
  height: 3rem !important; /* h-12 */
  border-radius: 9999px !important; /* rounded-full */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
}

.video-js.vjs-fullscreen .annotation-pencil-button:hover,
.video-wrapper:fullscreen .annotation-pencil-button:hover {
  background-color: rgb(67, 56, 202) !important; /* hover:bg-indigo-700 */
}

/* Ensure ring outline shows in fullscreen when annotation mode is active */
.video-js.vjs-fullscreen .annotation-pencil-button.ring-4,
.video-wrapper:fullscreen .annotation-pencil-button.ring-4 {
  box-shadow: 0 0 0 4px rgba(196, 181, 253, 0.5), /* ring-4 ring-indigo-300 */
              0 0 0 6px rgba(255, 255, 255, 1), /* ring-offset-2 */
              0 10px 15px -3px rgba(0, 0, 0, 0.1), 
              0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Normal mode ring (not fullscreen) - let Tailwind handle it */
/* Ring styles are handled by Tailwind classes in normal mode */

.video-js.vjs-fullscreen .annotation-pencil-button.ring-4.bg-indigo-700,
.video-wrapper:fullscreen .annotation-pencil-button.ring-4.bg-indigo-700 {
  background-color: rgb(67, 56, 202) !important; /* bg-indigo-700 when active */
}

/* Ensure canvas is visible in fullscreen */
.video-js .annotation-canvas,
.video-js.vjs-fullscreen .annotation-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
}

/* Ensure markers are visible in fullscreen */
.video-js.vjs-fullscreen .annotation-marker,
.video-js .annotation-marker {
  z-index: 17 !important;
  pointer-events: auto !important;
}

/* Ensure comment modal is visible in fullscreen and normal mode */
.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"],
.video-js [data-video-annotation-target="commentModal"],
.video-wrapper [data-video-annotation-target="commentModal"] {
  z-index: 9999 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] {
  z-index: 100000 !important;
}

/* Modal content styling - ensure all Tailwind classes work in fullscreen */
.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] .bg-white,
.video-js [data-video-annotation-target="commentModal"] .bg-white,
.video-wrapper [data-video-annotation-target="commentModal"] .bg-white {
  z-index: 10001 !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: white !important;
  border-radius: 0.5rem !important; /* rounded-lg */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; /* shadow-xl */
  max-width: 28rem !important; /* max-w-md */
  width: 100% !important;
  pointer-events: auto !important;
}

.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] .bg-white {
  z-index: 100001 !important;
}

/* Modal content padding and text styles */
.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] .bg-white > div,
.video-js [data-video-annotation-target="commentModal"] .bg-white > div,
.video-wrapper [data-video-annotation-target="commentModal"] .bg-white > div {
  padding: 1.5rem !important; /* p-6 */
}

.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] h3,
.video-js [data-video-annotation-target="commentModal"] h3,
.video-wrapper [data-video-annotation-target="commentModal"] h3 {
  font-size: 1.125rem !important; /* text-lg */
  font-weight: 600 !important; /* font-semibold */
  color: rgb(17, 24, 39) !important; /* text-gray-900 */
  margin-bottom: 1rem !important; /* mb-4 */
}

/* Label styles */
.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] label,
.video-js [data-video-annotation-target="commentModal"] label,
.video-wrapper [data-video-annotation-target="commentModal"] label {
  display: block !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  color: rgb(55, 65, 81) !important; /* text-gray-700 */
  margin-bottom: 0.5rem !important; /* mb-2 */
}

/* Textarea styles */
.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] textarea,
.video-js [data-video-annotation-target="commentModal"] textarea,
.video-wrapper [data-video-annotation-target="commentModal"] textarea {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important; /* px-3 py-2 */
  border: 1px solid rgb(209, 213, 219) !important; /* border-gray-300 */
  border-radius: 0.375rem !important; /* rounded-md */
  font-size: 0.875rem !important; /* text-sm */
  resize: none !important;
  background-color: white !important;
  color: rgb(17, 24, 39) !important; /* text-gray-900 */
}

.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] textarea:focus,
.video-js [data-video-annotation-target="commentModal"] textarea:focus,
.video-wrapper [data-video-annotation-target="commentModal"] textarea:focus {
  outline: none !important;
  border-color: rgb(99, 102, 241) !important; /* focus:ring-indigo-500 */
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5) !important; /* focus:ring-2 */
}

/* Button container */
.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] .flex,
.video-js [data-video-annotation-target="commentModal"] .flex,
.video-wrapper [data-video-annotation-target="commentModal"] .flex {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important; /* gap-3 */
}

/* Skip button styles */
.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] button[type="button"],
.video-js [data-video-annotation-target="commentModal"] button[type="button"],
.video-wrapper [data-video-annotation-target="commentModal"] button[type="button"] {
  padding: 0.5rem 1rem !important; /* px-4 py-2 */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  color: rgb(55, 65, 81) !important; /* text-gray-700 */
  background-color: rgb(243, 244, 246) !important; /* bg-gray-100 */
  border-radius: 0.375rem !important; /* rounded-md */
  border: none !important;
  cursor: pointer !important;
}

.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] button[type="button"]:hover,
.video-js [data-video-annotation-target="commentModal"] button[type="button"]:hover,
.video-wrapper [data-video-annotation-target="commentModal"] button[type="button"]:hover {
  background-color: rgb(229, 231, 235) !important; /* hover:bg-gray-200 */
}

/* Save button styles */
.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] button[type="submit"],
.video-js [data-video-annotation-target="commentModal"] button[type="submit"],
.video-wrapper [data-video-annotation-target="commentModal"] button[type="submit"] {
  padding: 0.5rem 1rem !important; /* px-4 py-2 */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  color: white !important;
  background-color: rgb(79, 70, 229) !important; /* bg-indigo-600 */
  border-radius: 0.375rem !important; /* rounded-md */
  border: none !important;
  cursor: pointer !important;
}

.video-js.vjs-fullscreen [data-video-annotation-target="commentModal"] button[type="submit"]:hover,
.video-js [data-video-annotation-target="commentModal"] button[type="submit"]:hover,
.video-wrapper [data-video-annotation-target="commentModal"] button[type="submit"]:hover {
  background-color: rgb(67, 56, 202) !important; /* hover:bg-indigo-700 */
}

/* When annotation mode is active, show crosshair over the whole video player */
.video-js.annotation-mode,
.video-js.annotation-mode .vjs-tech,
.video-js.annotation-mode .vjs-poster {
  cursor: crosshair !important;
}

/* Ensure group-hover works on dynamically added comments and annotations */
/* When a group item is hovered, show any child elements with opacity-0 */
.comment-item.group:hover button[class*="opacity-0"],
.comment-item.group:hover form[class*="opacity-0"],
.comment-item.group:hover [class*="opacity-0"] {
  opacity: 1 !important;
}

/* Also ensure it works for annotation items */
[id^="annotation_"].group:hover button[class*="opacity-0"],
[id^="annotation_"].group:hover form[class*="opacity-0"],
[id^="annotation_"].group:hover [class*="opacity-0"] {
  opacity: 1 !important;
}

/* Generic rule: any element with opacity-0 inside a hovered group */
.group:hover [class*="opacity-0"] {
  opacity: 1 !important;
}

/* Dashboard v2 — scoped translation of the supplied bento reference. */
.fe-dashboard-shell .fe-dashboard-main {
  background: #1a1a1a;
}

.fe-dashboard-v2 {
  --fe-v2-card: rgba(31, 31, 31, 0.9);
  --fe-v2-card-hover: rgba(38, 38, 38, 0.96);
  --fe-v2-border: rgba(255, 255, 255, 0.08);
  --fe-v2-border-strong: rgba(255, 255, 255, 0.16);
  --fe-v2-text: #f7f4ed;
  --fe-v2-muted: rgba(247, 244, 237, 0.56);
  --fe-v2-ghost: rgba(247, 244, 237, 0.3);
  --fe-v2-gold: #f5c842;
  --fe-v2-coral: #ff6b4a;
  margin: 0 auto;
  max-width: 1440px;
  width: 100%;
}

.fe-dashboard-v2-hero {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 38px;
}

.fe-dashboard-v2-greeting {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.fe-dashboard-v2-avatar {
  align-items: center;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.75), transparent 22%),
    linear-gradient(135deg, #f5c842 5%, #ff8a45 54%, #ff5d4a 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(245, 200, 66, 0.2);
  color: #111;
  display: inline-flex;
  flex: 0 0 42px;
  font-size: 12px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  letter-spacing: 0.08em;
}

.fe-dashboard-v2-title {
  color: var(--fe-v2-text);
  font-family: var(--fe-display-font, inherit);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin: 0;
}

.fe-dashboard-v2-subtitle {
  color: var(--fe-v2-muted);
  font-size: 0.76rem;
  line-height: 1.4;
  margin: 3px 0 0;
}

.fe-dashboard-v2-cta {
  align-items: center;
  background: var(--fe-v2-coral);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(255, 107, 74, 0.16);
  color: #111;
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-size: 0.8rem;
  font-weight: 720;
  justify-content: center;
  min-height: 40px;
  padding: 10px 21px;
  text-decoration: none;
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.fe-dashboard-v2-cta:hover {
  box-shadow: 0 14px 34px rgba(255, 107, 74, 0.26);
  opacity: 0.9;
  transform: translateY(-1px);
}

.fe-dashboard-v2-cta:focus-visible,
.fe-dashboard-v2 a:focus-visible,
.fe-dashboard-v2 button:focus-visible {
  outline: 2px solid var(--fe-v2-gold);
  outline-offset: 3px;
}

.fe-dashboard-v2-bento {
  display: grid;
  gap: 12px;
  grid-template-areas:
    "timeline timeline timeline"
    "review agent signals"
    "library library pipeline";
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fe-dashboard-v2-card {
  backdrop-filter: blur(20px);
  background: var(--fe-v2-card);
  border: 1px solid var(--fe-v2-border);
  border-radius: 24px;
  min-width: 0;
  overflow: hidden;
  padding: 21px;
  position: relative;
  transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.fe-dashboard-v2-card::before {
  background: radial-gradient(circle, rgba(245, 200, 66, 0.09), transparent 70%);
  content: "";
  height: 160px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: -70px;
  top: -90px;
  transition: opacity 300ms ease;
  width: 190px;
}

.fe-dashboard-v2-card:hover {
  background: var(--fe-v2-card-hover);
  border-color: var(--fe-v2-border-strong);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px) scale(1.006);
}

.fe-dashboard-v2-card:hover::before {
  opacity: 1;
}

.fe-dashboard-v2-card--timeline {
  grid-area: timeline;
  padding: 22px 26px 25px;
}

.fe-dashboard-v2-card--review {
  grid-area: review;
  min-height: 270px;
}

.fe-dashboard-v2-card--signals {
  grid-area: signals;
  min-height: 270px;
}

.fe-dashboard-v2-card--library {
  grid-area: library;
  min-height: 285px;
  padding: 22px 25px 25px;
}

.fe-dashboard-v2-card--pipeline {
  grid-area: pipeline;
  min-height: 285px;
}

.fe-dashboard-v2-card-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 17px;
  position: relative;
  z-index: 1;
}

.fe-dashboard-v2-label-link {
  align-items: center;
  color: var(--fe-v2-ghost);
  display: inline-flex;
  gap: 8px;
  text-decoration: none;
  transition: color 250ms ease;
}

.fe-dashboard-v2-label-link svg {
  height: 16px;
  width: 16px;
}

.fe-dashboard-v2-card:hover .fe-dashboard-v2-label-link {
  color: var(--fe-v2-gold);
}

.fe-dashboard-v2-card--signals:hover .fe-dashboard-v2-label-link {
  color: var(--fe-v2-coral);
}

.fe-dashboard-v2-kicker {
  color: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0;
  text-transform: uppercase;
}

.fe-dashboard-v2-meta,
.fe-dashboard-v2-meta-link {
  color: var(--fe-v2-ghost);
  font-size: 0.66rem;
  text-decoration: none;
  transition: color 220ms ease;
}

.fe-dashboard-v2-meta-link:hover {
  color: var(--fe-v2-text);
}

.fe-dashboard-v2-stat {
  color: var(--fe-v2-muted);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 660;
  letter-spacing: -0.07em;
  line-height: 0.9;
  margin: 3px 0 20px;
  transition: color 260ms ease;
}

.fe-dashboard-v2-card:hover .fe-dashboard-v2-stat--gold {
  color: var(--fe-v2-gold);
}

.fe-dashboard-v2-card:hover .fe-dashboard-v2-stat--coral {
  color: var(--fe-v2-coral);
}

.fe-dashboard-v2-compact-list {
  display: grid;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.fe-dashboard-v2-compact-row {
  align-items: center;
  border-radius: 12px;
  color: var(--fe-v2-muted);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  padding: 7px 8px;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

.fe-dashboard-v2-compact-row:hover {
  background: rgba(255, 255, 255, 0.045);
  color: var(--fe-v2-text);
}

.fe-dashboard-v2-compact-row > span:first-child {
  display: block;
  min-width: 0;
}

.fe-dashboard-v2-compact-row strong,
.fe-dashboard-v2-compact-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-dashboard-v2-compact-row strong {
  color: inherit;
  font-size: 0.77rem;
  font-weight: 580;
}

.fe-dashboard-v2-compact-row small {
  color: var(--fe-v2-ghost);
  font-size: 0.64rem;
  margin-top: 2px;
}

.fe-dashboard-v2-compact-row > svg {
  flex: none;
  height: 14px;
  opacity: 0.45;
  width: 14px;
}

.fe-dashboard-v2-pill {
  background: rgba(255, 107, 74, 0.09);
  border: 1px solid rgba(255, 107, 74, 0.18);
  border-radius: 999px;
  color: var(--fe-v2-coral);
  flex: none;
  font-size: 0.61rem;
  font-weight: 700;
  padding: 3px 8px;
}

.fe-dashboard-v2-timeline-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 86px minmax(0, 1fr);
}

.fe-dashboard-v2-timeline-days {
  display: grid;
  grid-template-columns: 86px repeat(5, minmax(0, 1fr));
  margin: 0 0 10px;
}

.fe-dashboard-v2-timeline-days > span:not(:first-child) {
  color: var(--fe-v2-ghost);
  font-size: 0.62rem;
  text-align: center;
}

.fe-dashboard-v2-timeline-rows {
  display: grid;
  gap: 10px;
}

.fe-dashboard-v2-timeline-row {
  align-items: center;
  border-radius: 10px;
  color: var(--fe-v2-muted);
  padding: 2px 0;
  text-decoration: none;
}

.fe-dashboard-v2-timeline-row:hover {
  color: var(--fe-v2-text);
}

.fe-dashboard-v2-timeline-name {
  font-size: 0.68rem;
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-dashboard-v2-timeline-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 30px;
  position: relative;
}

.fe-dashboard-v2-timeline-cell {
  border-right: 1px solid rgba(255, 255, 255, 0.045);
  grid-row: 1;
}

.fe-dashboard-v2-timeline-cell:last-of-type {
  border-right: 0;
}

.fe-dashboard-v2-timeline-bar {
  align-self: stretch;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  grid-row: 1;
  transform-origin: left center;
  transition: background 280ms ease, box-shadow 280ms ease;
  z-index: 1;
}

.fe-dashboard-v2-card--timeline:hover .fe-dashboard-v2-tone-gold {
  background: linear-gradient(90deg, rgba(245, 200, 66, 0.88), rgba(245, 200, 66, 0.55));
  box-shadow: 0 0 22px rgba(245, 200, 66, 0.14);
}

.fe-dashboard-v2-card--timeline:hover .fe-dashboard-v2-tone-coral {
  background: linear-gradient(90deg, rgba(255, 107, 74, 0.88), rgba(255, 107, 74, 0.55));
  box-shadow: 0 0 22px rgba(255, 107, 74, 0.13);
}

.fe-dashboard-v2-card--timeline:hover .fe-dashboard-v2-tone-violet {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.88), rgba(167, 139, 250, 0.55));
  box-shadow: 0 0 22px rgba(167, 139, 250, 0.13);
}

.fe-dashboard-v2-agent-wrap {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  grid-area: agent;
  height: 226px;
  justify-content: center;
  min-height: 226px;
  overflow: visible;
  padding-top: 0;
  position: relative;
  z-index: 4;
}

.fe-dashboard-v2-agent-group {
  cursor: default;
  position: relative;
}

.fe-dashboard-v2-agent {
  align-content: center;
  align-items: center;
  animation: fe-dashboard-v2-float 4s ease-in-out infinite;
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-radius: 999px;
  box-shadow: 0 0 60px rgba(245, 200, 66, 0.4), 0 0 120px rgba(255, 107, 74, 0.2);
  display: grid;
  gap: 13px 20px;
  grid-template-columns: repeat(2, 13px);
  grid-template-rows: 13px 33px;
  height: 140px;
  justify-content: center;
  transition: box-shadow 250ms ease, transform 250ms ease;
  width: 140px;
}

.fe-dashboard-v2-agent-group:hover .fe-dashboard-v2-agent {
  box-shadow: 0 0 100px rgba(245, 200, 66, 0.7), 0 0 160px rgba(255, 107, 74, 0.4);
  transform: scale(1.05);
}

.fe-dashboard-v2-agent-eye {
  background: #111;
  border-radius: 999px;
  height: 13px;
  transform: translateY(-4px);
  width: 13px;
}

.fe-dashboard-v2-agent-mouth {
  background: #111;
  border-radius: 0 0 66px 66px;
  grid-column: 1 / span 2;
  height: 33px;
  justify-self: center;
  transform: translateY(-4px);
  width: 66px;
}

.fe-dashboard-v2-agent-bubble {
  backdrop-filter: blur(26px);
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  border-radius: 20px;
  bottom: calc(100% + 12px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  left: 50%;
  opacity: 0;
  padding: 20px 16px 12px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 8px) scale(0.96);
  transition: opacity 220ms ease, transform 220ms ease;
  width: 280px;
  z-index: 8;
}

.fe-dashboard-v2-agent-group:hover .fe-dashboard-v2-agent-bubble,
.fe-dashboard-v2-agent-group:focus-within .fe-dashboard-v2-agent-bubble {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.fe-dashboard-v2-agent-heading {
  color: rgba(0, 0, 0, 0.9);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
}

.fe-dashboard-v2-agent-copy {
  color: rgba(0, 0, 0, 0.58);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 10px;
}

.fe-dashboard-v2-agent-input-shell {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 10px;
  box-sizing: border-box;
  height: 42px;
  position: relative;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.fe-dashboard-v2-agent-input-shell:focus-within {
  border-color: rgba(245, 200, 66, 0.92);
  box-shadow: 0 0 0 2px rgba(245, 200, 66, 0.2);
}

.fe-dashboard-v2-agent-input {
  background: transparent;
  border: 0;
  border-radius: inherit;
  color: #111;
  display: block;
  font-size: 13px;
  height: 100%;
  outline: none;
  padding: 9px 42px 9px 12px;
  width: 100%;
}

.fe-dashboard-v2-agent-input::placeholder {
  color: rgba(17, 17, 17, 0.4);
}

.fe-dashboard-v2-agent-send {
  align-items: center;
  background: var(--fe-v2-gold);
  border: 0;
  border-radius: 999px;
  color: #111;
  cursor: pointer;
  display: flex;
  height: 28px;
  justify-content: center;
  position: absolute;
  right: 6px;
  top: 6px;
  transition: background-color 180ms ease, transform 180ms ease;
  width: 28px;
}

.fe-dashboard-v2-agent-send:hover {
  background: rgba(245, 200, 66, 0.92);
  transform: translateY(-1px);
}

.fe-dashboard-v2-agent-send:active {
  transform: none;
}

.fe-dashboard-v2-agent-send-icon {
  height: 15px;
  width: 15px;
}

.fe-dashboard-v2-agent-link {
  color: #111;
  font-size: 0.68rem;
  font-weight: 700;
}

.fe-dashboard-v2-agent-tail {
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid rgba(255, 255, 255, 0.9);
  bottom: -8px;
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
}

/*
 * Flowbite is loaded after the application bundle and ships attribute-level
 * form rules. Lock the assistant controls to their Figma treatment so those
 * late rules cannot reintroduce blue focus borders or reset the send button.
 */
.fe-dashboard-v2 .fe-dashboard-v2-agent-bubble > .fe-dashboard-v2-agent-heading {
  color: #171717 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
}

.fe-dashboard-v2 .fe-dashboard-v2-agent-bubble > .fe-dashboard-v2-agent-copy {
  color: rgba(0, 0, 0, 0.58) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  margin: 0 0 10px !important;
}

.fe-dashboard-v2 .fe-dashboard-v2-agent-input-shell > input[type="text"].fe-dashboard-v2-agent-input {
  appearance: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #171717 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  height: 100% !important;
  line-height: 1.4 !important;
  outline: 0 !important;
  padding: 9px 42px 9px 12px !important;
}

.fe-dashboard-v2 .fe-dashboard-v2-agent-input-shell > input[type="text"].fe-dashboard-v2-agent-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.fe-dashboard-v2 .fe-dashboard-v2-agent-input-shell > button[type="button"].fe-dashboard-v2-agent-send {
  appearance: none !important;
  background-color: #f5c842 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #111111 !important;
  height: 28px !important;
  padding: 0 !important;
  right: 6px !important;
  top: 6px !important;
  width: 28px !important;
}

.fe-dashboard-v2 .fe-dashboard-v2-agent-input-shell > button[type="button"].fe-dashboard-v2-agent-send:hover {
  background-color: #fbd566 !important;
}

.fe-dashboard-v2-audio-grid,
.fe-dashboard-v2-project-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fe-dashboard-v2-audio-card {
  background: rgba(12, 12, 12, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  min-width: 0;
  overflow: hidden;
  transition: border-color 220ms ease, transform 220ms ease;
}

.fe-dashboard-v2-audio-card:hover,
.fe-dashboard-v2-audio-card:focus-within {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.fe-dashboard-v2-audio-cover {
  aspect-ratio: 1 / 0.88;
  background-color: #2c271d;
  overflow: hidden;
  position: relative;
}

.fe-dashboard-v2-cover-sunrise .fe-dashboard-v2-audio-cover {
  background:
    radial-gradient(circle at 72% 26%, rgba(255, 247, 196, 0.72), transparent 10%),
    repeating-radial-gradient(circle at 72% 26%, transparent 0 12px, rgba(255,255,255,0.09) 13px 14px),
    linear-gradient(145deg, #552316, #e06b2f 52%, #f5c842);
}

.fe-dashboard-v2-cover-violet .fe-dashboard-v2-audio-cover {
  background:
    linear-gradient(35deg, transparent 45%, rgba(255,255,255,0.13) 46% 49%, transparent 50%),
    linear-gradient(135deg, #19122d, #6542a5 55%, #a78bfa);
  background-size: 34px 34px, auto;
}

.fe-dashboard-v2-cover-ocean .fe-dashboard-v2-audio-cover {
  background:
    radial-gradient(ellipse at 20% 90%, rgba(99, 231, 255, 0.58), transparent 42%),
    radial-gradient(ellipse at 80% 5%, rgba(140, 85, 255, 0.52), transparent 40%),
    #0b3040;
}

.fe-dashboard-v2-cover-mint .fe-dashboard-v2-audio-cover {
  background:
    repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,0.11) 15px 17px),
    linear-gradient(145deg, #123b33, #2d9a72 60%, #70e2b5);
}

.fe-dashboard-v2-cover-ember .fe-dashboard-v2-audio-cover {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 210, 92, 0.9), transparent 7%),
    radial-gradient(circle at 68% 70%, rgba(255, 125, 77, 0.7), transparent 28%),
    linear-gradient(145deg, #3a1515, #a52f24 60%, #ff6b4a);
}

.fe-dashboard-v2-audio-cover::after {
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.58));
  content: "";
  inset: 0;
  position: absolute;
}

.fe-dashboard-v2-audio-mark {
  color: rgba(255, 255, 255, 0.34);
  font-size: clamp(1.1rem, 2.6vw, 2rem);
  font-weight: 850;
  left: 12px;
  letter-spacing: -0.1em;
  position: absolute;
  top: 8px;
  z-index: 1;
}

.fe-dashboard-v2-audio-waveform {
  bottom: 7px;
  height: 20px;
  left: 8px;
  opacity: 0.34;
  position: absolute;
  right: 8px;
  z-index: 2;
}

.fe-dashboard-v2-audio-play {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  left: calc(50% - 24px);
  opacity: 0;
  position: absolute;
  top: calc(50% - 24px);
  transform: scale(0.88);
  transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
  width: 48px;
  z-index: 3;
}

.fe-dashboard-v2-audio-card:hover .fe-dashboard-v2-audio-play,
.fe-dashboard-v2-audio-card:focus-within .fe-dashboard-v2-audio-play,
.fe-dashboard-v2-audio-play[data-state="playing"] {
  opacity: 1;
  transform: scale(1);
}

.fe-dashboard-v2-audio-play:hover {
  background: rgba(255, 255, 255, 0.25);
}

.fe-dashboard-v2-audio-play:disabled {
  cursor: default;
  opacity: 0.3;
}

.fe-dashboard-v2-audio-play svg {
  height: 20px;
  width: 20px;
}

.fe-dashboard-v2-audio-info {
  padding: 9px 10px 11px;
}

.fe-dashboard-v2-audio-title,
.fe-dashboard-v2-audio-artist,
.fe-dashboard-v2-audio-duration {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-dashboard-v2-audio-title {
  color: rgba(247, 244, 237, 0.7);
  font-size: 0.7rem;
  font-weight: 620;
  text-decoration: none;
}

.fe-dashboard-v2-audio-card:hover .fe-dashboard-v2-audio-title {
  color: var(--fe-v2-text);
}

.fe-dashboard-v2-audio-artist,
.fe-dashboard-v2-audio-duration {
  color: var(--fe-v2-ghost);
  font-size: 0.58rem;
  margin: 3px 0 0;
}

.fe-dashboard-v2-project-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 15px;
  color: var(--fe-v2-muted);
  min-height: 160px;
  overflow: hidden;
  padding: 15px;
  position: relative;
  text-decoration: none;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.fe-dashboard-v2-project-card::after {
  background: var(--fe-project-accent, var(--fe-v2-gold));
  border-radius: 999px;
  bottom: -36px;
  content: "";
  filter: blur(34px);
  height: 70px;
  opacity: 0.28;
  position: absolute;
  right: -15px;
  width: 90px;
}

.fe-dashboard-v2-project-card--1 { --fe-project-accent: #ff6b4a; }
.fe-dashboard-v2-project-card--2 { --fe-project-accent: #a78bfa; }
.fe-dashboard-v2-project-card--3 { --fe-project-accent: #34d399; }
.fe-dashboard-v2-project-card--4 { --fe-project-accent: #38bdf8; }

.fe-dashboard-v2-project-card:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--fe-v2-text);
  transform: translateY(-2px);
}

.fe-dashboard-v2-project-index {
  color: var(--fe-project-accent, var(--fe-v2-gold));
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  margin-bottom: 26px;
}

.fe-dashboard-v2-project-card strong,
.fe-dashboard-v2-project-card small,
.fe-dashboard-v2-project-card > span:last-child {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-dashboard-v2-project-card strong {
  color: inherit;
  font-size: 0.75rem;
}

.fe-dashboard-v2-project-card small {
  color: var(--fe-v2-ghost);
  font-size: 0.62rem;
  margin-top: 4px;
}

.fe-dashboard-v2-project-card > span:last-child {
  bottom: 13px;
  color: var(--fe-v2-ghost);
  font-size: 0.57rem;
  left: 15px;
  position: absolute;
  right: 15px;
}

.fe-dashboard-v2-pipeline-list {
  display: grid;
  gap: 8px;
}

.fe-dashboard-v2-pipeline-row {
  align-items: center;
  border-radius: 11px;
  color: var(--fe-v2-ghost);
  display: flex;
  font-size: 0.72rem;
  justify-content: space-between;
  padding: 6px 7px;
  text-decoration: none;
  transition: background 190ms ease, color 190ms ease;
}

.fe-dashboard-v2-pipeline-row strong {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 999px;
  color: inherit;
  font-size: 0.66rem;
  min-width: 31px;
  padding: 3px 9px;
  text-align: center;
}

.fe-dashboard-v2-pipeline-row:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fe-v2-text);
}

.fe-dashboard-v2-pipeline-row.fe-dashboard-v2-tone-gold:hover strong { color: #f5c842; border-color: rgba(245, 200, 66, 0.25); }
.fe-dashboard-v2-pipeline-row.fe-dashboard-v2-tone-coral:hover strong,
.fe-dashboard-v2-pipeline-row.fe-dashboard-v2-tone-ember:hover strong { color: #ff6b4a; border-color: rgba(255, 107, 74, 0.25); }
.fe-dashboard-v2-pipeline-row.fe-dashboard-v2-tone-ocean:hover strong { color: #38bdf8; border-color: rgba(56, 189, 248, 0.25); }
.fe-dashboard-v2-pipeline-row.fe-dashboard-v2-tone-mint:hover strong { color: #34d399; border-color: rgba(52, 211, 153, 0.25); }
.fe-dashboard-v2-pipeline-row.fe-dashboard-v2-tone-violet:hover strong { color: #a78bfa; border-color: rgba(167, 139, 250, 0.25); }

.fe-dashboard-v2-empty {
  align-items: flex-start;
  color: var(--fe-v2-ghost);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 112px;
  position: relative;
  z-index: 1;
}

.fe-dashboard-v2-empty--compact {
  min-height: 70px;
}

.fe-dashboard-v2-empty p {
  color: var(--fe-v2-muted);
  font-size: 0.76rem;
  margin: 0;
}

.fe-dashboard-v2-empty span {
  font-size: 0.64rem;
  margin-top: 4px;
}

/* New project dashboard modal */
.fe-dashboard-v2-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 100;
}

.fe-dashboard-v2-modal.hidden {
  display: none;
}

.fe-dashboard-v2-modal-backdrop {
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.76);
  border: 0;
  cursor: default;
  inset: 0;
  position: absolute;
}

.fe-dashboard-v2-modal-panel {
  background: #202020;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 25px;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.58);
  color: var(--fe-v2-text);
  max-height: min(90vh, 900px);
  max-width: 850px;
  overflow: auto;
  position: relative;
  width: 100%;
  z-index: 1;
}

.fe-dashboard-v2-modal-header {
  align-items: flex-start;
  background: rgba(32, 32, 32, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  padding: 24px 26px 20px;
  position: sticky;
  top: 0;
  z-index: 8;
}

.fe-dashboard-v2-modal-title {
  color: var(--fe-v2-text);
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.035em;
  margin: 5px 0 0;
}

.fe-dashboard-v2-modal-copy {
  color: var(--fe-v2-muted);
  font-size: 0.74rem;
  margin: 5px 0 0;
}

.fe-dashboard-v2-modal-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--fe-v2-muted);
  cursor: pointer;
  display: flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: center;
  margin-left: 20px;
}

.fe-dashboard-v2-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fe-v2-text);
}

.fe-dashboard-v2-modal-close svg {
  height: 17px;
  width: 17px;
}

.fe-dashboard-v2-modal-body {
  padding: 25px 26px 29px;
}

.fe-dashboard-v2-modal .fe-project-form label,
.fe-dashboard-v2-modal .fe-project-form p,
.fe-dashboard-v2-modal .fe-project-form .text-gray-900,
.fe-dashboard-v2-modal .fe-project-form .text-gray-700 {
  color: rgba(247, 244, 237, 0.78) !important;
}

.fe-dashboard-v2-modal .fe-project-form .fe-panel-muted {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.09);
}

.fe-dashboard-v2-modal .fe-project-form .fe-panel-muted:hover,
.fe-dashboard-v2-modal .fe-project-form .fe-panel-muted:has(input:checked) {
  background: rgba(245, 200, 66, 0.07) !important;
  border-color: rgba(245, 200, 66, 0.34) !important;
}

.fe-dashboard-v2-modal .fe-project-form .fe-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--fe-v2-text) !important;
}

.fe-dashboard-v2-modal .fe-project-form .fe-input:focus {
  border-color: rgba(245, 200, 66, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.1) !important;
}

.fe-dashboard-v2-modal .fe-project-form .fe-button-secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--fe-v2-text);
}

.fe-dashboard-v2-modal .fe-project-form .fe-button-primary {
  background: var(--fe-v2-coral);
  color: #111;
}

.fe-dashboard-v2-modal .fe-datepicker-popover {
  z-index: 12;
}

@keyframes fe-dashboard-v2-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@media (max-width: 1100px) {
  .fe-dashboard-v2-bento {
    grid-template-areas:
      "timeline timeline"
      "review signals"
      "agent agent"
      "library library"
      "pipeline pipeline";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fe-dashboard-v2-agent-wrap {
    height: 226px;
    min-height: 226px;
    padding-top: 0;
  }

  .fe-dashboard-v2-audio-grid,
  .fe-dashboard-v2-project-grid {
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    scroll-snap-type: x proximity;
  }

  .fe-dashboard-v2-audio-card,
  .fe-dashboard-v2-project-card {
    min-width: 145px;
    scroll-snap-align: start;
  }
}

@media (max-width: 720px) {
  .fe-dashboard-v2-hero {
    align-items: flex-start;
    margin-bottom: 26px;
  }

  .fe-dashboard-v2-subtitle {
    max-width: 220px;
  }

  .fe-dashboard-v2-cta {
    min-height: 37px;
    padding: 9px 15px;
  }

  .fe-dashboard-v2-bento {
    grid-template-areas:
      "timeline"
      "review"
      "agent"
      "signals"
      "library"
      "pipeline";
    grid-template-columns: minmax(0, 1fr);
  }

  .fe-dashboard-v2-card,
  .fe-dashboard-v2-card--timeline,
  .fe-dashboard-v2-card--library {
    border-radius: 20px;
    padding: 19px;
  }

  .fe-dashboard-v2-card--review,
  .fe-dashboard-v2-card--signals {
    min-height: 235px;
  }

  .fe-dashboard-v2-timeline-row {
    gap: 10px;
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .fe-dashboard-v2-timeline-days {
    grid-template-columns: 72px repeat(5, minmax(0, 1fr));
  }

  .fe-dashboard-v2-agent-wrap {
    height: 288px;
    min-height: 288px;
    padding-top: 112px;
  }

  .fe-dashboard-v2-agent-bubble {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    width: min(280px, calc(100vw - 32px));
  }

  .fe-dashboard-v2-agent {
    height: 118px;
    transform: scale(0.84);
    width: 118px;
  }

  .fe-dashboard-v2-modal {
    align-items: flex-end;
    padding: 0;
  }

  .fe-dashboard-v2-modal-panel {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 94vh;
  }

  .fe-dashboard-v2-modal-header,
  .fe-dashboard-v2-modal-body {
    padding-left: 19px;
    padding-right: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-dashboard-v2 *,
  .fe-dashboard-v2 *::before,
  .fe-dashboard-v2 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .fe-dashboard-v2-card:hover,
  .fe-dashboard-v2-agent-group:hover .fe-dashboard-v2-agent,
  .fe-dashboard-v2-audio-card:hover,
  .fe-dashboard-v2-project-card:hover {
    transform: none;
  }
}

/* Audio asset detail ------------------------------------------------------ */
.fe-audio-detail-main {
  max-width: none !important;
  padding: 0 !important;
  width: 100%;
}

.fe-audio-detail {
  --fe-audio-card: var(--fe-detail-card-surface);
  --fe-audio-border: rgba(255, 255, 255, 0.1);
  --fe-audio-cyan: #06b6d4;
  --fe-audio-yellow: #f5c842;
  --fe-audio-orange: #ff6b4a;
  --fe-audio-green: #34d399;
  --fe-audio-purple: #a78bfa;
  color: #fff;
  font-family: var(--font-fe-ui);
  min-height: 100vh;
  padding-top: 72px;
  position: relative;
}

.fe-audio-detail *,
.fe-audio-detail *::before,
.fe-audio-detail *::after {
  box-sizing: border-box;
}

.fe-audio-detail h2,
.fe-audio-detail h3,
.fe-audio-detail p,
.fe-audio-detail ol {
  margin: 0;
}

.fe-audio-detail button,
.fe-audio-detail input,
.fe-audio-detail textarea,
.fe-audio-detail summary {
  font: inherit;
}

.fe-audio-detail [hidden] {
  display: none !important;
}

.fe-audio-detail__breadcrumb-bar {
  align-items: center;
  background: rgba(0, 0, 0, 0.36);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  height: 72px;
}

.fe-audio-detail__breadcrumb-inner {
  align-items: center;
  display: flex;
  gap: 16px;
  padding: 0 32px;
  width: 100%;
}

.fe-audio-detail__back {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.58);
  display: inline-flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.fe-audio-detail__back:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  transform: translateX(-1px);
}

.fe-audio-detail__back svg,
.fe-audio-detail__breadcrumbs svg {
  height: 16px;
  width: 16px;
}

.fe-audio-detail__breadcrumbs {
  align-items: center;
  color: rgba(255, 255, 255, 0.36);
  display: flex;
  flex: 1 1 auto;
  font-size: 13px;
  gap: 7px;
  list-style: none;
  min-width: 0;
  padding: 0;
}

.fe-audio-detail__breadcrumbs li {
  min-width: 0;
}

.fe-audio-detail__breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.fe-audio-detail__breadcrumbs a:hover {
  color: rgba(255, 255, 255, 0.72);
}

.fe-audio-detail__breadcrumbs li[aria-current="page"] {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-audio-detail__breadcrumbs li[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.2);
  flex: 0 0 auto;
}

.fe-audio-detail__breadcrumb-upload {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-audio-yellow), var(--fe-audio-orange));
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(245, 200, 66, 0.2);
  color: #090909;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  min-height: 38px;
  padding: 8px 16px;
  text-decoration: none;
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.fe-audio-detail__breadcrumb-upload:hover {
  box-shadow: 0 8px 28px rgba(245, 200, 66, 0.28);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.fe-audio-detail__breadcrumb-upload svg {
  height: 15px;
  width: 15px;
}

.fe-audio-detail__workspace {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  max-width: 1400px;
  padding: 48px 0 56px;
  width: calc(100% - 48px);
}

.fe-audio-detail__card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--fe-audio-card);
  border: 1px solid var(--fe-audio-border);
  border-radius: 16px;
  box-shadow: none;
  transition: background 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}

.fe-audio-detail__media-shell {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 65%) minmax(300px, calc(35% - 16px));
  position: relative;
}

.fe-audio-detail__media-column {
  min-width: 0;
}

.fe-audio-detail__player-card {
  min-height: 0;
  overflow: hidden;
  padding: 20px;
}

.fe-audio-detail__player-heading,
.fe-audio-detail__notes-heading,
.fe-audio-detail__section-heading {
  align-items: center;
  display: flex;
}

.fe-audio-detail__player-heading {
  justify-content: space-between;
  margin-bottom: 16px;
  min-height: 30px;
}

.fe-audio-detail__player-heading > span,
.fe-audio-detail__notes-heading > span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.fe-audio-detail .fe-audio-detail__focus-trigger {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-fe-ui) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  gap: 6px;
  height: 30px;
  line-height: 15px !important;
  min-height: 30px;
  padding: 5px 10px;
}

.fe-audio-detail__focus-trigger:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.fe-audio-detail__focus-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.fe-audio-detail__focus-trigger svg {
  height: 14px;
  width: 14px;
}

.fe-audio-detail__waveform-stage {
  background: rgba(6, 182, 212, 0.04);
  border: 1px solid rgba(6, 182, 212, 0.1);
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
  height: 180px;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.fe-audio-detail__waveform {
  bottom: 16px;
  height: 36px;
  left: 16px;
  overflow: hidden;
  position: absolute;
  right: 16px;
  z-index: 1;
}

.fe-audio-detail__waveform--visualized {
  opacity: 0;
}

.fe-audio-detail__visual-waveform {
  bottom: 16px;
  height: 36px;
  left: 16px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  z-index: 2;
}

.fe-audio-detail__visual-waveform-bars {
  align-items: end;
  column-gap: 2px;
  display: grid;
  grid-template-columns: repeat(72, minmax(0, 1fr));
  inset: 0;
  position: absolute;
}

.fe-audio-detail__visual-waveform-bars span {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px 2px 0 0;
  display: block;
  min-height: 3px;
  width: 100%;
}

.fe-audio-detail__visual-waveform-bars--played {
  clip-path: inset(0 100% 0 0);
}

.fe-audio-detail__visual-waveform-bars--played span {
  background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.72) 100%);
}

.fe-audio-detail__playhead {
  background: #06b6d4;
  border-radius: 1px;
  bottom: 0;
  left: 0;
  opacity: 0.8;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-1px);
  transition: left 0.1s linear;
  width: 2px;
  z-index: 3;
}

.fe-audio-detail__markers {
  bottom: 0;
  left: 16px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 0;
  z-index: 4;
}

.fe-audio-detail__marker {
  background: rgba(245, 200, 66, 0.8);
  border: 0;
  border-radius: 1px;
  bottom: 0;
  cursor: pointer;
  height: 16px;
  padding: 0;
  pointer-events: auto;
  position: absolute;
  transform: translateX(-50%);
  transition: filter 0.15s ease;
  width: 2px;
}

.fe-audio-detail__marker:hover,
.fe-audio-detail__marker:focus-visible,
.fe-audio-detail__marker.is-active {
  filter: drop-shadow(0 0 5px rgba(245, 200, 66, 0.8));
}

.fe-audio-detail__marker.is-pulsing {
  animation: fe-audio-marker-pulse 0.5s ease;
}

.fe-audio-detail__marker-label {
  display: none;
}

.fe-audio-detail__player-status {
  align-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.64);
  display: flex;
  font-size: 11px;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 8;
}

.fe-audio-detail__scrubber {
  height: 12px;
  margin-top: 12px;
  position: relative;
}

.fe-audio-detail__scrubber::before,
.fe-audio-detail__scrubber-progress {
  border-radius: 2px;
  content: "";
  height: 4px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 4px;
}

.fe-audio-detail__scrubber::before {
  background: rgba(255, 255, 255, 0.1);
  right: 0;
}

.fe-audio-detail__scrubber-progress {
  background: linear-gradient(135deg, var(--fe-audio-cyan), rgba(6, 182, 212, 0.6));
  width: 0;
}

.fe-audio-detail__scrubber input[type="range"] {
  appearance: none;
  background: transparent;
  cursor: pointer;
  height: 12px;
  inset: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

.fe-audio-detail__scrubber input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
}

.fe-audio-detail__scrubber input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32);
  height: 12px;
  margin-top: -4px;
  width: 12px;
}

.fe-audio-detail__scrubber input[type="range"]::-moz-range-track {
  background: transparent;
  border: 0;
  height: 4px;
}

.fe-audio-detail__scrubber input[type="range"]::-moz-range-progress {
  background: transparent;
}

.fe-audio-detail__scrubber input[type="range"]::-moz-range-thumb {
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32);
  height: 12px;
  width: 12px;
}

.fe-audio-detail__timecodes {
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  justify-content: space-between;
  margin-top: 2px;
}

.fe-audio-detail__transport {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 12px 0 4px;
}

.fe-audio-detail__transport button {
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
}

.fe-audio-detail__transport-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  height: 36px;
  width: 36px;
}

.fe-audio-detail .fe-audio-detail__transport-primary {
  background-color: var(--fe-audio-cyan) !important;
  background-image: linear-gradient(135deg, var(--fe-audio-cyan), rgba(6, 182, 212, 0.8)) !important;
  border: 0;
  color: #001014 !important;
  height: 40px;
  opacity: 1 !important;
  width: 40px;
}

.fe-audio-detail__transport button:hover {
  filter: brightness(1.12);
}

.fe-audio-detail__transport svg {
  height: 16px;
  width: 16px;
}

.fe-audio-detail__versions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.fe-audio-detail__versions::-webkit-scrollbar {
  display: none;
}

.fe-audio-detail__versions span,
.fe-audio-detail__versions a {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.38);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.fe-audio-detail__versions .is-current {
  background: linear-gradient(135deg, #7c5ce7, #a78bfa);
  color: #fff;
}

.fe-audio-detail__versions a:not(.is-current):hover,
.fe-audio-detail__versions a:not(.is-current):focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  transform: translateY(-1px);
}

.fe-audio-detail__versions .is-unavailable {
  border-color: rgba(255, 255, 255, 0.08);
}

.fe-audio-detail__notes {
  display: flex;
  flex-direction: column;
  height: 520px;
  min-width: 0;
  overflow: hidden;
  padding: 20px;
}

.fe-audio-detail__notes-heading {
  justify-content: space-between;
  margin-bottom: 12px;
}

.fe-audio-detail__notes-heading small {
  color: rgba(255, 255, 255, 0.28);
  font-size: 10px;
}

.fe-audio-detail__notes-heading--focus {
  display: none;
}

.fe-audio-detail__comments {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
  scrollbar-width: thin;
}

.fe-audio-detail__comments::-webkit-scrollbar {
  width: 4px;
}

.fe-audio-detail__comments::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

.fe-audio-detail__comment {
  align-items: flex-start;
  border: 1px solid transparent;
  border-radius: 12px;
  display: flex;
  gap: 10px;
  padding: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fe-audio-detail__comment:hover,
.fe-audio-detail__comment:focus-within,
.fe-audio-detail__comment.is-active {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(6, 182, 212, 0.12);
}

.fe-audio-detail .fe-audio-detail__comment-time {
  background: rgba(6, 182, 212, 0.15);
  border: 0;
  border-radius: 999px;
  color: var(--fe-audio-cyan);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 15px !important;
  padding: 2px 8px !important;
}

.fe-audio-detail__comment-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.fe-audio-detail__comment-copy strong {
  color: rgba(255, 255, 255, 0.72);
  display: block;
  font-size: 11px;
  font-weight: 550;
  margin-bottom: 3px;
}

.fe-audio-detail__comment-copy p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.fe-audio-detail__comment-delete-form {
  flex: 0 0 auto;
}

.fe-audio-detail__comment-delete {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  opacity: 0;
  padding: 3px;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.fe-audio-detail__comment:hover .fe-audio-detail__comment-delete,
.fe-audio-detail__comment:focus-within .fe-audio-detail__comment-delete {
  opacity: 1;
}

.fe-audio-detail__comment-delete:hover {
  color: var(--fe-audio-orange);
}

.fe-audio-detail__comment-delete svg {
  height: 13px;
  width: 13px;
}

.fe-audio-detail__compose {
  flex: 0 0 auto;
  margin-top: 10px;
  padding-top: 8px;
}

.fe-audio-detail__compose > p {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  margin-bottom: 6px;
}

.fe-audio-detail__compose-row {
  display: flex;
  gap: 8px;
}

.fe-audio-detail__compose-row input[type="text"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  flex: 1 1 auto;
  font-size: 14px;
  min-width: 0;
  padding: 10px 14px;
}

.fe-audio-detail__compose-row input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.24);
}

.fe-audio-detail__compose-row input[type="text"]:focus {
  border-color: var(--fe-audio-cyan);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.14);
  outline: 0;
}

.fe-audio-detail__compose-row button {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-audio-cyan), rgba(6, 182, 212, 0.78));
  border: 0;
  border-radius: 12px;
  color: #001014;
  cursor: pointer;
  display: flex;
  flex: 0 0 44px;
  justify-content: center;
}

.fe-audio-detail__compose-row button svg {
  height: 16px;
  width: 16px;
}

.fe-audio-detail__section {
  padding: 20px;
}

.fe-audio-detail__reveal {
  animation: fe-audio-detail-reveal 0.55s cubic-bezier(0.25, 0, 0, 1) both;
  animation-delay: calc(var(--fe-audio-order, 0) * 50ms);
}

.fe-audio-detail__section-heading {
  color: rgba(255, 255, 255, 0.4);
  gap: 8px;
  margin-bottom: 16px;
}

.fe-audio-detail__section-heading--split {
  justify-content: space-between;
}

.fe-audio-detail__section-heading--split > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.fe-audio-detail__section-heading h2 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.fe-audio-detail__section-heading svg {
  height: 16px;
  width: 16px;
}

.fe-audio-detail__section-heading--split > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  text-align: right;
}

.fe-audio-detail__qc-list,
.fe-audio-detail__qc-item {
  display: flex;
  flex-direction: column;
}

.fe-audio-detail__qc-list {
  gap: 10px;
}

.fe-audio-detail__qc-item {
  gap: 6px;
}

.fe-audio-detail__qc-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
}

.fe-audio-detail__qc-row--pass {
  background: rgba(52, 211, 153, 0.05);
  border-color: rgba(52, 211, 153, 0.12);
}

.fe-audio-detail__qc-row--fail {
  background: rgba(255, 107, 74, 0.05);
  border-color: rgba(255, 107, 74, 0.12);
}

.fe-audio-detail__qc-row--missing {
  background: rgba(245, 200, 66, 0.04);
  border-color: rgba(245, 200, 66, 0.12);
}

.fe-audio-detail__qc-icon {
  color: var(--fe-audio-orange);
  display: flex;
  flex: 0 0 16px;
}

.fe-audio-detail__qc-row--pass .fe-audio-detail__qc-icon {
  color: var(--fe-audio-green);
}

.fe-audio-detail__qc-row--missing .fe-audio-detail__qc-icon {
  color: var(--fe-audio-yellow);
}

.fe-audio-detail__qc-icon svg {
  height: 16px;
  width: 16px;
}

.fe-audio-detail__qc-row > strong {
  color: rgba(255, 255, 255, 0.72);
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 500;
}

.fe-audio-detail__qc-value {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.fe-audio-detail__status {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 11px;
  min-width: 54px;
  padding: 4px 12px;
  text-align: center;
}

.fe-audio-detail__status--pass {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.22);
  color: var(--fe-audio-green);
}

.fe-audio-detail__status--fail {
  background: rgba(255, 107, 74, 0.15);
  border-color: rgba(255, 107, 74, 0.22);
  color: var(--fe-audio-orange);
}

.fe-audio-detail__status--missing {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.2);
  color: var(--fe-audio-yellow);
}

.fe-audio-detail__qc-note {
  background: rgba(255, 107, 74, 0.045);
  border: 1px solid rgba(255, 107, 74, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1.5;
  padding: 9px 14px;
}

.fe-audio-detail__workspace--service-context {
  padding-top: 0;
}

.fe-audio-detail__service-section {
  overflow: hidden;
  padding: 20px;
}

.fe-audio-detail__service-alert {
  align-items: center;
  background: rgba(255, 107, 74, 0.08);
  border: 1px solid rgba(255, 107, 74, 0.18);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.68);
  display: flex;
  font-size: 12px;
  gap: 10px;
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 12px 14px;
}

.fe-audio-detail__service-alert svg {
  color: var(--fe-audio-orange);
  flex: 0 0 16px;
  height: 16px;
  width: 16px;
}

.fe-audio-detail__service-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fe-audio-detail__service-grid--secondary {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  margin-top: 14px;
}

.fe-audio-detail__service-panel,
.fe-audio-detail__service-subsection {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  min-width: 0;
  padding: 16px;
}

.fe-audio-detail__service-panel header {
  align-items: center;
  display: flex;
  gap: 9px;
  margin-bottom: 14px;
}

.fe-audio-detail__service-panel header > span {
  align-items: center;
  background: rgba(245, 200, 66, 0.1);
  border: 1px solid rgba(245, 200, 66, 0.18);
  border-radius: 999px;
  color: var(--fe-audio-yellow);
  display: flex;
  flex: 0 0 28px;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.fe-audio-detail__service-panel header svg {
  height: 14px;
  width: 14px;
}

.fe-audio-detail__service-panel h3,
.fe-audio-detail__service-subsection h3 {
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 600;
}

.fe-audio-detail__metadata-grid,
.fe-audio-detail__tag-list {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.fe-audio-detail__metadata-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fe-audio-detail__metadata-grid--s3-import {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fe-audio-detail__metadata-grid div,
.fe-audio-detail__tag-list div {
  min-width: 0;
}

.fe-audio-detail__metadata-grid dt,
.fe-audio-detail__tag-list dt {
  color: rgba(255, 255, 255, 0.32);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.fe-audio-detail__metadata-grid dd,
.fe-audio-detail__tag-list dd {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.fe-audio-detail__service-audio {
  display: block;
  height: 36px;
  max-width: 100%;
  width: 100%;
}

.fe-audio-detail__service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.fe-audio-detail__service-button,
.fe-audio-detail__manual-review-submit {
  align-items: center;
  background: rgba(245, 200, 66, 0.12);
  border: 1px solid rgba(245, 200, 66, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 34px;
  padding: 0 14px;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.fe-audio-detail__service-button:hover,
.fe-audio-detail__manual-review-submit:hover {
  background: rgba(245, 200, 66, 0.18);
  border-color: rgba(245, 200, 66, 0.32);
  color: #fff;
}

.fe-audio-detail__service-button--secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.fe-audio-detail__manual-review {
  position: relative;
}

.fe-audio-detail__manual-review summary {
  list-style: none;
}

.fe-audio-detail__manual-review summary::-webkit-details-marker {
  display: none;
}

.fe-audio-detail__s3-import-form {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.fe-audio-tools__import-panel {
  display: grid;
  gap: 14px;
}

.fe-audio-tools__import-form {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.fe-audio-tools__fields {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 1.1fr) minmax(120px, 0.5fr);
}

.fe-audio-tools__field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.fe-audio-tools__field span {
  color: rgba(255, 255, 255, 0.44);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.fe-audio-tools__field input {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  min-height: 42px;
  min-width: 0;
  padding: 0 12px;
  width: 100%;
}

.fe-audio-tools__field input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 200, 66, 0.45);
  outline: none;
}

.fe-audio-tools__field--number input {
  text-align: center;
}

.fe-audio-tools__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.fe-audio-tools__actions--secondary {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}

.fe-audio-tools__action-form {
  display: inline-flex;
  margin: 0;
}

.fe-audio-tools__actions .fe-button-primary,
.fe-audio-tools__actions .fe-button-secondary {
  min-height: 42px;
  white-space: nowrap;
}

.fe-audio-detail__manual-review-actions {
  display: flex;
  justify-content: flex-end;
}

.fe-audio-detail__manual-review-form {
  background: rgba(9, 8, 7, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  display: grid;
  gap: 8px;
  margin-top: 8px;
  min-width: min(280px, 78vw);
  padding: 10px;
  position: absolute;
  right: 0;
  z-index: 4;
}

.fe-audio-detail__manual-review-input {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  min-height: 36px;
  padding: 0 10px;
  width: 100%;
}

.fe-audio-detail__manual-review-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.fe-audio-detail__service-inline-link {
  color: rgba(245, 200, 66, 0.88);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  margin: -4px 0 12px;
  text-decoration: none;
}

.fe-audio-detail__service-inline-link:hover {
  color: #fff;
}

.fe-audio-detail__service-subsection {
  margin-top: 14px;
}

.fe-audio-detail__service-grid--secondary .fe-audio-detail__service-subsection {
  margin-top: 0;
}

.fe-audio-detail__service-subsection > h3,
.fe-audio-detail__service-subsection-heading {
  margin-bottom: 12px;
}

.fe-audio-detail__service-subsection-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.fe-audio-detail__service-subsection-heading span {
  color: rgba(255, 255, 255, 0.34);
  font-size: 11px;
  text-align: right;
}

.fe-audio-detail__finding-list,
.fe-audio-detail__history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fe-audio-detail__finding,
.fe-audio-detail__history-list article {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  min-width: 0;
}

.fe-audio-detail__finding {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  padding: 12px;
}

.fe-audio-detail__finding-icon {
  color: var(--fe-audio-yellow);
  display: flex;
  flex: 0 0 16px;
  margin-top: 2px;
}

.fe-audio-detail__finding-icon svg {
  height: 16px;
  width: 16px;
}

.fe-audio-detail__finding div {
  min-width: 0;
}

.fe-audio-detail__finding strong,
.fe-audio-detail__history-list strong {
  color: rgba(255, 255, 255, 0.74);
  display: block;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.45;
}

.fe-audio-detail__finding small,
.fe-audio-detail__history-list span {
  color: rgba(255, 255, 255, 0.38);
  display: block;
  font-size: 11px;
  line-height: 1.45;
  margin-top: 3px;
}

.fe-audio-detail__history-list article {
  padding: 12px;
}

.fe-audio-detail__tool-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fe-audio-detail__tool-grid article {
  align-items: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  display: grid;
  gap: 8px;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  min-height: 38px;
  padding: 8px 10px;
}

.fe-audio-detail__tool-grid article > span {
  color: rgba(255, 255, 255, 0.28);
  display: flex;
}

.fe-audio-detail__tool-grid svg {
  height: 16px;
  width: 16px;
}

.fe-audio-detail__tool-grid strong {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-audio-detail__tool-grid small {
  color: rgba(255, 255, 255, 0.34);
  font-size: 10px;
}

.fe-audio-detail__tool-grid article.is-available {
  background: rgba(52, 211, 153, 0.06);
  border-color: rgba(52, 211, 153, 0.14);
}

.fe-audio-detail__tool-grid article.is-available > span,
.fe-audio-detail__tool-grid article.is-available small {
  color: var(--fe-audio-green);
}

.fe-audio-detail__ops-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fe-audio-detail__ops-item {
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
  padding: 12px;
}

.fe-audio-detail__ops-item div {
  min-width: 0;
}

.fe-audio-detail__ops-item strong {
  color: rgba(255, 255, 255, 0.76);
  display: block;
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.fe-audio-detail__ops-item small,
.fe-audio-detail__ops-item p,
.fe-audio-detail__service-empty {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  line-height: 1.45;
}

.fe-audio-detail__ops-item small,
.fe-audio-detail__ops-item p {
  display: block;
  margin-top: 4px;
}

.fe-audio-detail__ops-badge {
  background: rgba(245, 200, 66, 0.1);
  border: 1px solid rgba(245, 200, 66, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 9px 10px;
  white-space: nowrap;
}

.fe-audio-detail__pipeline-card {
  padding: 20px 28px;
}

.fe-audio-detail__pipeline-card .fe-audio-detail__section-heading h2 {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fe-audio-detail__pipeline-scroll {
  overflow-x: auto;
  padding: 0;
  scrollbar-width: thin;
}

.fe-audio-detail__pipeline {
  align-items: flex-start;
  display: flex;
  min-width: 560px;
  padding: 0;
}

.fe-audio-detail__pipeline-step {
  --fe-audio-stage: rgba(255, 255, 255, 0.25);
  align-items: flex-start;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  list-style: none;
  min-width: 0;
  position: relative;
  text-align: center;
}

.fe-audio-detail__pipeline-step:last-child {
  flex: 0 0 60px;
}

.fe-audio-detail__pipeline-step--yellow { --fe-audio-stage: var(--fe-audio-yellow); }
.fe-audio-detail__pipeline-step--orange { --fe-audio-stage: var(--fe-audio-orange); }
.fe-audio-detail__pipeline-step--cyan { --fe-audio-stage: var(--fe-audio-cyan); }
.fe-audio-detail__pipeline-step--green { --fe-audio-stage: var(--fe-audio-green); }
.fe-audio-detail__pipeline-step--danger { --fe-audio-stage: #ef4444; }

.fe-audio-detail__pipeline-line {
  background: rgba(255, 255, 255, 0.08);
  height: 2px;
  left: 44px;
  position: absolute;
  right: 8px;
  top: 17px;
}

.fe-audio-detail__pipeline-line.is-active {
  background: linear-gradient(90deg, var(--fe-audio-yellow), var(--fe-audio-orange));
}

.fe-audio-detail__pipeline-node {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  height: 36px;
  justify-content: center;
  margin-bottom: 6px;
  position: relative;
  width: 36px;
  z-index: 1;
}

.fe-audio-detail__pipeline-node svg {
  height: 14px;
  width: 14px;
}

.fe-audio-detail__pipeline-step.is-complete .fe-audio-detail__pipeline-node {
  background: linear-gradient(135deg, var(--fe-audio-yellow), var(--fe-audio-orange));
  border-color: transparent;
  color: #fff;
}

.fe-audio-detail__pipeline-step.is-current .fe-audio-detail__pipeline-node {
  animation: fe-audio-pipeline-current 2s ease-in-out infinite;
  background: color-mix(in srgb, var(--fe-audio-stage) 15%, rgba(255, 255, 255, 0.04));
  border-color: var(--fe-audio-stage);
  color: var(--fe-audio-stage);
}

.fe-audio-detail__pipeline-step strong {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  margin-left: -12px;
  max-width: 60px;
  text-align: center;
  width: 60px;
}

.fe-audio-detail__pipeline-step.is-current strong {
  color: rgba(255, 255, 255, 0.8);
}

.fe-audio-detail__documents {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fe-audio-detail__document {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
}

.fe-audio-detail__document-state {
  color: rgba(255, 107, 74, 0.68);
  display: flex;
  flex: 0 0 16px;
}

.fe-audio-detail__document-state.is-complete {
  color: var(--fe-audio-green);
}

.fe-audio-detail__document-state svg {
  height: 16px;
  width: 16px;
}

.fe-audio-detail__document > div {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.fe-audio-detail__document strong {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-audio-detail__document small {
  color: rgba(255, 255, 255, 0.3);
  font-size: 9px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-audio-detail__small-action {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  justify-content: center;
  line-height: 15px;
  min-height: 28px;
  padding: 5px 12px;
  text-decoration: none;
}

.fe-audio-detail__small-action--upload {
  background: rgba(245, 200, 66, 0.1);
  border-color: rgba(245, 200, 66, 0.2);
  color: var(--fe-audio-yellow);
}

.fe-audio-detail__section-footer {
  margin-top: 14px;
}

.fe-audio-detail__documents-card > .fe-audio-detail__empty {
  background: rgba(255, 255, 255, 0.02);
  border: 0;
}

.fe-audio-detail__documents-empty {
  gap: 12px;
}

.fe-audio-detail__delivery {
  min-height: 212px;
}

.fe-audio-detail__prerequisites {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.fe-audio-detail__prerequisites span {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  padding: 6px 16px;
}

.fe-audio-detail__prerequisites .is-complete {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.22);
  color: var(--fe-audio-green);
}

.fe-audio-detail__prerequisites .is-incomplete {
  background: rgba(255, 107, 74, 0.1);
  border-color: rgba(255, 107, 74, 0.16);
  color: var(--fe-audio-orange);
}

.fe-audio-detail__prerequisites .is-neutral {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.48);
}

.fe-audio-detail__review.is-approved {
  background: rgba(52, 211, 153, 0.025);
  border-color: rgba(52, 211, 153, 0.18);
}

.fe-audio-detail__review-note {
  background: rgba(255, 107, 74, 0.06);
  border: 1px solid rgba(255, 107, 74, 0.14);
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
}

.fe-audio-detail__review-note strong {
  color: var(--fe-audio-orange);
  display: block;
  font-size: 11px;
  margin-bottom: 4px;
}

.fe-audio-detail__review-note p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.55;
}

.fe-audio-detail__approval-success {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 4px 0 18px;
  text-align: center;
}

.fe-audio-detail__approval-success > span {
  align-items: center;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: 50%;
  color: var(--fe-audio-green);
  display: flex;
  height: 56px;
  justify-content: center;
  margin-bottom: 12px;
  width: 56px;
}

.fe-audio-detail__approval-success svg {
  height: 26px;
  width: 26px;
}

.fe-audio-detail__approval-success h3 {
  font-size: 18px;
  font-weight: 650;
}

.fe-audio-detail__approval-success p {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  margin-top: 5px;
}

.fe-audio-detail__review-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.fe-audio-detail__action-form {
  display: inline-flex;
}

.fe-audio-detail__action {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  gap: 7px;
  justify-content: center;
  min-height: 36px;
  padding: 8px 16px;
  text-decoration: none;
}

.fe-audio-detail__action svg {
  height: 14px;
  width: 14px;
}

.fe-audio-detail__action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.fe-audio-detail__action--brand {
  background: linear-gradient(135deg, var(--fe-audio-yellow), var(--fe-audio-orange));
  border-color: transparent;
  color: #090909;
}

.fe-audio-detail__action--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}

.fe-audio-detail__action--success {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--fe-audio-green);
}

.fe-audio-detail button.fe-audio-detail__action--signoff {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-fe-ui) !important;
  font-size: 13px !important;
  font-style: normal;
  font-weight: 500 !important;
  height: 36px;
  line-height: 18px !important;
  min-height: 36px;
  padding: 8px 18px;
}

.fe-audio-detail__action--danger {
  background: rgba(255, 107, 74, 0.08);
  border-color: rgba(255, 107, 74, 0.18);
  color: var(--fe-audio-orange);
}

.fe-audio-detail__readonly {
  color: rgba(255, 255, 255, 0.36);
  font-size: 12px;
}

.fe-audio-detail__reject {
  position: relative;
}

.fe-audio-detail__reject > summary {
  list-style: none;
}

.fe-audio-detail__reject > summary::-webkit-details-marker {
  display: none;
}

.fe-audio-detail__reject[open] {
  flex: 1 0 100%;
}

.fe-audio-detail__reject form {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding: 14px;
}

.fe-audio-detail__reject label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.fe-audio-detail__reject textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}

.fe-audio-detail__reject input[type="submit"] {
  justify-self: start;
}

.fe-audio-detail__downloads {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fe-audio-detail__download-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.68);
  display: flex;
  gap: 11px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 13px;
  text-decoration: none;
}

.fe-audio-detail__download-card:hover {
  border-color: rgba(6, 182, 212, 0.25);
  color: var(--fe-audio-cyan);
}

.fe-audio-detail__download-card > svg {
  flex: 0 0 17px;
  height: 17px;
  width: 17px;
}

.fe-audio-detail__download-card > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fe-audio-detail__download-card strong {
  font-size: 11px;
}

.fe-audio-detail__download-card small {
  color: rgba(255, 255, 255, 0.3);
  font-size: 9px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-audio-detail__delivery-gate {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.2);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: 48px;
  justify-content: center;
  width: 100%;
}

.fe-audio-detail__delivery-gate svg {
  height: 16px;
  width: 16px;
}

.fe-audio-detail__delivery--prototype {
  min-height: 252px;
}

.fe-audio-detail__delivery-trigger {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.2);
  display: flex;
  gap: 8px;
  height: 48px;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  width: 100%;
}

.fe-audio-detail__delivery-trigger:disabled {
  cursor: not-allowed;
}

.fe-audio-detail__delivery-trigger.is-ready {
  animation: fe-audio-delivery-pulse 2s ease-in-out infinite;
  background: linear-gradient(110deg, var(--fe-audio-yellow), var(--fe-audio-orange));
  border-color: transparent;
  color: #090909;
  cursor: pointer;
}

.fe-audio-detail__delivery-trigger.is-ready:hover {
  transform: translateY(-1px);
}

.fe-audio-detail__delivery-trigger svg {
  height: 16px;
  width: 16px;
}

.fe-audio-detail__delivery-trigger strong {
  font-size: 14px;
  font-weight: 650;
}

.fe-audio-detail__delivery-destination {
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  font-size: 11px;
  gap: 6px;
  justify-content: center;
  margin-top: 10px !important;
}

.fe-audio-detail__delivery-destination svg {
  height: 12px;
  width: 12px;
}

.fe-audio-detail__delivery.is-delivered {
  background: linear-gradient(105deg, rgba(255, 107, 74, 0.12), rgba(52, 211, 153, 0.035));
  border-color: rgba(52, 211, 153, 0.32);
  min-height: 308px;
}

.fe-audio-detail__delivery-success {
  align-items: center;
  animation: fe-audio-delivery-success-in 0.4s ease both;
  display: flex;
  flex-direction: column;
  padding: 16px 0 8px;
  text-align: center;
}

.fe-audio-detail__delivery-success:focus {
  outline: 0;
}

.fe-audio-detail__delivery-success-icon {
  align-items: center;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 50%;
  color: var(--fe-audio-green);
  display: flex;
  height: 64px;
  justify-content: center;
  margin-bottom: 16px;
  width: 64px;
}

.fe-audio-detail__delivery-success-icon svg {
  height: 28px;
  width: 28px;
}

.fe-audio-detail__delivery-success h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 650;
  margin-bottom: 8px;
}

.fe-audio-detail__delivery-success p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-bottom: 16px;
}

.fe-audio-detail__delivery-success > strong {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 999px;
  color: var(--fe-audio-green);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  margin-bottom: 8px;
  padding: 6px 16px;
}

.fe-audio-detail__delivery-success > span:not(.fe-audio-detail__delivery-success-icon) {
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  font-size: 12px;
  gap: 6px;
  margin-top: 4px;
}

.fe-audio-detail__delivery-success > span svg {
  height: 12px;
  width: 12px;
}

.fe-audio-detail__delivery-modal {
  align-items: center;
  animation: fe-audio-delivery-modal-fade 0.2s ease both;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 10000;
}

.fe-audio-detail__delivery-modal > section {
  align-items: center;
  animation: fe-audio-delivery-modal-rise 0.22s ease both;
  background: rgba(15, 15, 15, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  padding: 40px;
  text-align: center;
  width: 100%;
}

.fe-audio-detail__delivery-modal > section:focus {
  outline: 0;
}

.fe-audio-detail__delivery-modal-icon {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-audio-yellow), var(--fe-audio-orange));
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 72px;
  justify-content: center;
  margin-bottom: 20px;
  width: 72px;
}

.fe-audio-detail__delivery-modal-icon svg {
  height: 28px;
  width: 28px;
}

.fe-audio-detail__delivery-modal h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 650;
  margin-bottom: 8px;
}

.fe-audio-detail__delivery-modal p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px;
  max-width: 380px;
}

.fe-audio-detail__delivery-modal-destination {
  align-items: center;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  font-size: 12px;
  gap: 6px;
  margin-bottom: 24px;
}

.fe-audio-detail__delivery-modal-destination svg {
  height: 12px;
  width: 12px;
}

.fe-audio-detail__delivery-modal > section > div {
  display: flex;
  gap: 12px;
}

.fe-audio-detail__delivery-modal button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  padding: 10px 24px;
}

.fe-audio-detail__delivery-modal button:last-child {
  background: linear-gradient(135deg, var(--fe-audio-yellow), var(--fe-audio-orange));
  border: 0;
  color: #090909;
  font-weight: 650;
}

body.fe-audio-detail-modal-open {
  overflow: hidden;
}

.fe-audio-detail__empty {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.34);
  display: flex;
  font-size: 11px;
  gap: 8px;
  justify-content: center;
  min-height: 78px;
  padding: 18px;
  text-align: center;
}

.fe-audio-detail__empty--player {
  flex-direction: column;
  height: 250px;
}

.fe-audio-detail__empty--notes {
  background: transparent;
  border: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.fe-audio-detail__empty svg {
  height: 24px;
  width: 24px;
}

.fe-audio-detail__empty strong {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.fe-audio-detail__empty span {
  color: rgba(255, 255, 255, 0.3);
}

.fe-audio-detail :is(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fe-audio-cyan);
  outline-offset: 3px;
}

.fe-audio-detail__focus-brand,
.fe-audio-detail__focus-meta,
.fe-audio-detail__focus-toolbar,
.fe-audio-detail__compose-prefix--focus {
  display: none;
}

body.fe-audio-detail-focus-open {
  overflow: hidden;
}

body.fe-audio-detail-focus-open [data-nav-shell] {
  display: none !important;
}

body.fe-audio-detail-focus-open [data-page-transition-shell],
body.fe-audio-detail-focus-open [data-page-transition-scope],
body.fe-audio-detail-focus-open [data-page-transition-item] {
  transform: none !important;
  will-change: auto !important;
}

.fe-audio-detail__media-shell.is-focus-mode {
  animation: fe-audio-focus-in 0.3s ease both;
  background: #000;
  display: grid !important;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 300px;
  height: 100dvh;
  inset: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  position: fixed !important;
  width: 100vw;
  z-index: 9999;
}

.fe-audio-detail__media-shell.is-focus-mode:focus {
  outline: none;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__media-column {
  align-items: center;
  display: flex;
  height: 100dvh;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__player-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  min-height: 0;
  overflow: visible;
  padding: 0;
  transform: translateY(20px);
  width: calc(100% - 64px);
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__player-heading,
.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__transport,
.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__versions {
  display: none;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__waveform-stage {
  height: 180px;
  width: 100%;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__waveform {
  bottom: 16px;
  height: 36px;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__notes {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.6);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  height: 100dvh;
  padding: 0;
  width: 300px;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__notes-heading--default {
  display: none;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__notes-heading--focus {
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 16px 20px;
}

.fe-audio-detail__notes-heading--focus strong {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-audio-detail__asset-pill {
  background: rgba(6, 182, 212, 0.15);
  border-radius: 999px;
  color: var(--fe-audio-cyan);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  padding: 2px 8px;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__comments {
  gap: 12px;
  padding: 16px;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__comment {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 12px;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__comment-copy {
  display: contents;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__comment-copy strong {
  align-self: center;
  grid-column: 2;
  margin: 0;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__comment-copy p {
  grid-column: 1 / -1;
  grid-row: 2;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__comment-delete-form {
  grid-column: 3;
  grid-row: 1;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__compose {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
  padding: 12px 16px 14px;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__compose-prefix--default {
  display: none;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__compose-prefix--focus {
  display: inline;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__compose > p {
  color: rgba(255, 255, 255, 0.28);
  font-size: 9px;
  line-height: 13px;
  margin-bottom: 6px;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__compose-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  gap: 0;
  height: 38px;
  padding: 3px 3px 3px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__compose-row:focus-within {
  border-color: var(--fe-audio-yellow);
  box-shadow: 0 0 0 2px rgba(245, 200, 66, 0.12);
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__compose-row input[type="text"] {
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  height: 30px;
  padding: 0 8px 0 0;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__compose-row input[type="text"]:focus {
  border: 0;
  box-shadow: none;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__compose-row button {
  background-color: var(--fe-audio-orange) !important;
  background-image: linear-gradient(135deg, var(--fe-audio-yellow), var(--fe-audio-orange)) !important;
  border-radius: 50%;
  flex: 0 0 30px;
  height: 30px;
  width: 30px;
}

.fe-audio-detail__focus-brand,
.fe-audio-detail__focus-meta {
  pointer-events: none;
  position: absolute;
  top: 20px;
  z-index: 20;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__focus-brand {
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  font-size: 12px;
  gap: 8px;
  left: 20px;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__focus-meta {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  right: 20px;
}

.fe-audio-detail__focus-meta > span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.fe-audio-detail__focus-meta small {
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  margin-top: 2px;
}

.fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__focus-toolbar {
  align-items: center;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  bottom: 24px;
  display: flex;
  gap: 12px;
  left: 50%;
  padding: 10px 20px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 24;
}

.fe-audio-detail__focus-toolbar button {
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 0;
}

.fe-audio-detail__focus-ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.58);
  height: 34px;
  width: 34px;
}

.fe-audio-detail__focus-play {
  background-color: var(--fe-audio-orange) !important;
  background-image: linear-gradient(135deg, var(--fe-audio-yellow), var(--fe-audio-orange)) !important;
  border: 0;
  color: #111 !important;
  height: 40px;
  width: 40px;
}

.fe-audio-detail__focus-toolbar button:hover {
  filter: brightness(1.12);
}

.fe-audio-detail__focus-toolbar svg {
  height: 15px;
  width: 15px;
}

.fe-audio-detail__focus-divider {
  background: rgba(255, 255, 255, 0.1);
  height: 20px;
  width: 1px;
}

.fe-audio-detail__focus-logo {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-audio-yellow), var(--fe-audio-orange));
  border-radius: 50%;
  color: #111;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

@keyframes fe-audio-detail-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fe-audio-focus-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fe-audio-marker-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.8); }
}

@keyframes fe-audio-pipeline-current {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes fe-audio-delivery-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(245, 200, 66, 0); }
  50% { box-shadow: 0 8px 28px rgba(245, 200, 66, 0.16); }
}

@keyframes fe-audio-delivery-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fe-audio-delivery-modal-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fe-audio-delivery-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .fe-audio-detail__workspace {
    padding-top: 36px;
    width: calc(100% - 32px);
  }

  .fe-audio-detail__media-shell {
    grid-template-columns: 1fr;
  }

  .fe-audio-tools__import-form {
    grid-template-columns: 1fr;
  }

  .fe-audio-tools__fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(120px, 0.45fr);
  }

  .fe-audio-detail__notes {
    height: 460px;
  }
}

@media (max-width: 767px) {
  .fe-audio-detail__breadcrumb-bar {
    height: 62px;
  }

  .fe-audio-detail__breadcrumb-inner {
    gap: 10px;
    padding: 0 14px;
  }

  .fe-audio-detail__back {
    flex-basis: 34px;
    height: 34px;
  }

  .fe-audio-detail__breadcrumbs {
    font-size: 11px;
  }

  .fe-audio-detail__breadcrumbs li:not([aria-current="page"]):not([aria-hidden="true"]):not(:first-child) {
    display: none;
  }

  .fe-audio-detail__breadcrumb-upload {
    min-height: 36px;
    padding: 7px 11px;
  }

  .fe-audio-detail__breadcrumb-upload svg {
    display: none;
  }

  .fe-audio-detail__workspace {
    gap: 14px;
    padding: 24px 0 40px;
    width: calc(100% - 24px);
  }

  .fe-audio-detail__player-card,
  .fe-audio-detail__notes,
  .fe-audio-detail__section {
    padding: 16px;
  }

  .fe-audio-detail__player-card {
    min-height: 0;
  }

  .fe-audio-detail__player-heading > span {
    max-width: 54%;
  }

  .fe-audio-detail__waveform-stage {
    height: 150px;
  }

  .fe-audio-detail__waveform {
    height: 36px;
  }

  .fe-audio-detail__notes {
    height: 420px;
  }

  .fe-audio-detail__section-heading--split {
    align-items: flex-start;
    flex-direction: column;
  }

  .fe-audio-detail__section-heading--split > span {
    text-align: left;
  }

  .fe-audio-detail__qc-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
  }

  .fe-audio-detail__qc-value {
    grid-column: 2 / -1;
    text-align: left;
  }

  .fe-audio-detail__status {
    grid-column: 3;
    grid-row: 1;
  }

  .fe-audio-detail__pipeline-card {
    padding: 18px 16px;
  }

  .fe-audio-detail__documents,
  .fe-audio-detail__downloads {
    grid-template-columns: 1fr;
  }

  .fe-audio-detail__service-grid,
  .fe-audio-detail__service-grid--secondary,
  .fe-audio-detail__metadata-grid,
  .fe-audio-detail__metadata-grid--compact,
  .fe-audio-detail__tool-grid {
    grid-template-columns: 1fr;
  }

  .fe-audio-tools__fields {
    grid-template-columns: 1fr;
  }

  .fe-audio-tools__actions {
    justify-content: stretch;
  }

  .fe-audio-tools__actions .fe-button-primary,
  .fe-audio-tools__actions .fe-button-secondary,
  .fe-audio-tools__action-form {
    width: 100%;
  }

  .fe-audio-detail__delivery {
    min-height: 0;
  }

  .fe-audio-detail__prerequisites {
    gap: 8px;
  }

  .fe-audio-detail__delivery-gate {
    height: auto;
    min-height: 48px;
    padding: 10px 14px;
    text-align: center;
  }

  .fe-audio-detail__review-actions,
  .fe-audio-detail__action-form,
  .fe-audio-detail__action,
  .fe-audio-detail__reject {
    width: 100%;
  }

  .fe-audio-detail__media-shell.is-focus-mode {
    grid-template-columns: 1fr;
    grid-template-rows: 56% 44%;
  }

  .fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__media-column {
    height: 100%;
    padding: 0;
  }

  .fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__player-card {
    min-height: 0;
    padding: 0;
    transform: translateY(10px);
    width: calc(100% - 24px);
  }

  .fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__player-heading {
    display: none;
  }

  .fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__waveform-stage {
    height: 150px;
  }

  .fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__waveform {
    bottom: 16px;
    height: 36px;
  }

  .fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__notes {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
    width: 100%;
  }

  .fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__focus-meta {
    display: none;
  }

  .fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__focus-brand {
    left: 12px;
    top: 12px;
  }

  .fe-audio-detail__media-shell.is-focus-mode .fe-audio-detail__focus-toolbar {
    bottom: 10px;
    gap: 8px;
    padding: 8px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-audio-detail *,
  .fe-audio-detail *::before,
  .fe-audio-detail *::after,
  .fe-audio-detail__media-shell.is-focus-mode {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Figma Make functional project wizard refinements. */
.fe-project-wizard .fe-project-wizard-step {
  animation: none;
}

.fe-project-wizard .fe-project-wizard-section-title--compact {
  margin-bottom: 6px;
}

.fe-project-wizard-choice-field {
  border: 0;
  margin: 0 0 18px;
  min-width: 0;
  padding: 0;
}

.fe-project-wizard-choice-field > legend {
  color: rgba(255, 255, 255, 0.4);
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.fe-project-wizard-choice-field > legend span {
  color: #ff6b4a;
}

.fe-project-wizard-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fe-project-wizard-pill {
  cursor: pointer;
  display: inline-flex;
  position: relative;
}

.fe-project-wizard-pill input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.fe-project-wizard-pill > span {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.4);
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 7px 16px;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.fe-project-wizard-pill input:checked + span {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.3);
  color: #f5c842;
}

.fe-project-wizard-priority input:checked + span {
  background: color-mix(in srgb, var(--pill-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--pill-accent) 25%, transparent);
  color: var(--pill-accent);
}

.fe-project-wizard-pill input:focus-visible + span {
  outline: 2px solid #f5c842;
  outline-offset: 2px;
}

.fe-project-wizard .fe-project-wizard-assets {
  margin-bottom: 28px;
}

.fe-project-wizard .fe-project-wizard-asset {
  display: block;
  min-height: 0;
  padding: 16px;
}

.fe-project-wizard .fe-project-wizard-asset:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.fe-project-wizard .fe-project-wizard-asset.is-selected {
  background: color-mix(in srgb, var(--asset-accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--asset-accent) 30%, transparent);
}

.fe-project-wizard-asset-select {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 12px;
  width: 100%;
}

.fe-project-wizard-asset-select > input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.fe-project-wizard-asset-select > input:focus-visible ~ .fe-project-wizard-asset-icon {
  outline: 2px solid var(--asset-accent);
  outline-offset: 2px;
}

.fe-project-wizard .fe-project-wizard-asset-copy strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.fe-project-wizard .fe-project-wizard-asset-copy small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  line-height: 1.4;
}

.fe-project-wizard-asset-name {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: none;
  color: #ffffff;
  display: none;
  font-size: 13px;
  line-height: 1.4;
  margin: 16px 0 0 48px;
  min-height: 38px;
  outline: none;
  padding: 8px 12px;
  transition: border-color 200ms ease;
  width: calc(100% - 48px);
}

.fe-project-wizard-asset.is-selected .fe-project-wizard-asset-name {
  display: block;
}

.fe-project-wizard-asset-name::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.fe-project-wizard-asset-name:focus {
  border-color: var(--asset-accent);
}

.fe-project-wizard .fe-project-wizard-member {
  min-height: 54px;
}

.fe-project-wizard .fe-project-wizard-member-copy strong {
  line-height: 1.4;
}

.fe-project-wizard .fe-project-wizard-add-member .fe-project-wizard-role-select {
  flex: 0 0 auto;
  width: auto;
}

.fe-project-wizard-no-assets {
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
  text-align: center;
}

.fe-project-wizard-no-assets svg {
  color: rgba(255, 255, 255, 0.2);
  height: 24px;
  margin-bottom: 8px;
  stroke-width: 1.7;
  width: 24px;
}

.fe-project-wizard-no-assets strong {
  font-size: 14px;
  font-weight: 400;
}

.fe-project-wizard-no-assets span {
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  margin-top: 4px;
}

.fe-project-wizard-deliveries {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fe-project-wizard .fe-project-wizard-delivery {
  margin: 0;
}

.fe-project-wizard .fe-project-wizard-delivery-heading > strong {
  color: #ffffff;
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
}

.fe-project-wizard-destination-field {
  margin-bottom: 0;
}

.fe-project-wizard-custom-url {
  overflow: hidden;
}

.fe-project-wizard-custom-url input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 13px;
  margin-top: 8px;
  outline: none;
  padding: 8px 12px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  width: 100%;
}

.fe-project-wizard-custom-url input:focus {
  border-color: #f5c842;
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.1);
}

.fe-project-wizard .fe-project-wizard-requirement {
  cursor: pointer;
  gap: 12px;
}

.fe-project-wizard-requirement > input[type="checkbox"] {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.fe-project-wizard-switch {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 40px;
  height: 22px;
  padding: 3px;
  transition: background 250ms ease;
  width: 40px;
}

.fe-project-wizard-switch > span {
  background: #ffffff;
  border-radius: 999px;
  height: 16px;
  transition: transform 250ms ease;
  width: 16px;
}

.fe-project-wizard-requirement > input[type="checkbox"]:checked + .fe-project-wizard-switch {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
}

.fe-project-wizard-requirement > input[type="checkbox"]:checked + .fe-project-wizard-switch > span {
  transform: translateX(18px);
}

.fe-project-wizard-requirement > input[type="checkbox"]:focus-visible + .fe-project-wizard-switch {
  outline: 2px solid #f5c842;
  outline-offset: 2px;
}

.fe-project-wizard-summary-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.fe-project-wizard-summary-meta > span {
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
}

.fe-project-wizard-summary-meta svg {
  color: rgba(255, 255, 255, 0.3);
  height: 13px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 13px;
}

.fe-project-wizard-summary-priority {
  --priority-accent: #f5c842;
  background: color-mix(in srgb, var(--priority-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--priority-accent) 25%, transparent);
  border-radius: 999px;
  color: var(--priority-accent);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
}

.fe-project-wizard-review-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fe-project-wizard-review-asset {
  align-items: center;
  background: color-mix(in srgb, var(--asset-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--asset-accent) 20%, transparent);
  border-radius: 999px;
  color: var(--asset-accent);
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  padding: 6px 12px;
}

.fe-project-wizard-review-asset svg {
  height: 13px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 13px;
}

.fe-project-wizard-review-deliveries {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fe-project-wizard-review-delivery-icon {
  align-items: center;
  background: color-mix(in srgb, var(--asset-accent) 12%, transparent);
  border-radius: 999px;
  color: var(--asset-accent);
  display: inline-flex;
  flex: 0 0 28px;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.fe-project-wizard-review-delivery-icon svg {
  height: 14px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
}

.fe-project-wizard-review-arrow {
  color: rgba(255, 255, 255, 0.3);
  flex: 0 0 auto;
  font-size: 14px;
}

.fe-project-wizard-review-badges {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.fe-project-wizard-review-badges em {
  background: rgba(52, 211, 153, 0.12);
  border-radius: 999px;
  color: #34d399;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  padding: 2px 7px;
}

.fe-project-wizard-review-badges em:nth-child(2) {
  background: rgba(251, 146, 60, 0.12);
  color: #fb923c;
}

.fe-project-wizard-review-badges em:nth-child(3) {
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
}

.fe-project-wizard button.fe-project-wizard-primary,
.fe-project-wizard a.fe-project-wizard-primary {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  opacity: 1;
  padding: 10px 28px;
  transform: none;
}

.fe-project-wizard button.fe-project-wizard-primary:hover,
.fe-project-wizard a.fe-project-wizard-primary:hover {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.fe-project-wizard button.fe-project-wizard-continue:disabled {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  opacity: 0.4;
}

.fe-project-wizard button.fe-project-wizard-create:disabled {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  opacity: 0.35;
}

.fe-project-wizard a.fe-project-wizard-view-project {
  padding-left: 24px;
  padding-right: 24px;
}

.fe-project-wizard button.fe-project-wizard-ghost,
.fe-project-wizard a.fe-project-wizard-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 400;
  min-height: 40px;
  padding: 10px 20px;
  transform: none;
}

.fe-project-wizard button.fe-project-wizard-ghost:hover,
.fe-project-wizard a.fe-project-wizard-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.6);
  transform: none;
}

.fe-project-wizard button.fe-project-wizard-add-button {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  min-height: 38px;
  opacity: 1;
  padding: 8px 16px;
  transform: none;
}

.fe-project-wizard button.fe-project-wizard-add-button:hover {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.fe-project-wizard button.fe-project-wizard-add-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

@media (max-width: 720px) {
  .fe-project-wizard-pills {
    gap: 7px;
  }

  .fe-project-wizard-pill > span {
    padding-left: 13px;
    padding-right: 13px;
  }

  .fe-project-wizard .fe-project-wizard-add-member .fe-project-wizard-role-select {
    width: 100%;
  }

  .fe-project-wizard-review-delivery {
    align-items: flex-start;
  }

  .fe-project-wizard-review-badges {
    flex-basis: 100%;
    padding-left: 38px;
  }
}

/* Figma Make token correction — dashboard and authenticated top navigation. */
.fe-dashboard-shell .fe-dashboard-main {
  align-items: stretch;
  background: transparent;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 112px 64px 48px;
}

.fe-dashboard-v2 {
  --fe-v2-card: transparent;
  --fe-v2-card-hover: rgba(255, 255, 255, 0.03);
  --fe-v2-border: rgba(255, 255, 255, 0.08);
  --fe-v2-border-strong: rgba(255, 255, 255, 0.12);
  --fe-v2-text: #ffffff;
  --fe-v2-muted: rgba(255, 255, 255, 0.4);
  --fe-v2-ghost: rgba(255, 255, 255, 0.2);
  --fe-v2-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--fe-v2-font);
  max-width: 1400px;
}

.fe-dashboard-v2 button,
.fe-dashboard-v2 input,
.fe-dashboard-v2 label,
.fe-dashboard-v2 select,
.fe-dashboard-v2 textarea {
  font-family: var(--fe-v2-font);
}

.fe-dashboard-v2-hero {
  gap: 24px;
  margin-bottom: 32px;
}

.fe-dashboard-v2-greeting {
  gap: 12px;
}

.fe-dashboard-v2-avatar {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border: 0;
  box-shadow: none;
  flex-basis: 40px;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  letter-spacing: 0;
}

.fe-dashboard-v2-title {
  color: #ffffff;
  font-family: var(--fe-v2-font);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.fe-dashboard-v2-subtitle {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  margin-top: 0;
}

.fe-dashboard-v2-cta {
  appearance: none;
  background: #FF6B4A;
  box-shadow: none;
  color: #000000;
  filter: none;
  font-size: 13px;
  font-weight: 600;
  mix-blend-mode: normal;
  min-height: 40px;
  opacity: 1;
  padding: 10px 20px;
  transition: opacity 200ms ease;
}

.fe-dashboard-v2-cta:hover {
  box-shadow: none;
  opacity: 0.88;
  transform: none;
}

.fe-dashboard-v2-hero[data-page-transition-static] {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.fe-dashboard-shell .fe-dashboard-v2 button.fe-dashboard-v2-cta,
.fe-dashboard-shell .fe-dashboard-v2 a.fe-dashboard-v2-cta {
  align-items: center;
  appearance: none;
  background-color: #FF6B4A !important;
  background-image: none !important;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  box-sizing: border-box;
  color: #000000 !important;
  cursor: pointer;
  display: inline-flex;
  filter: none !important;
  flex: none;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  line-height: 20px;
  min-height: 40px;
  mix-blend-mode: normal;
  opacity: 1 !important;
  padding: 10px 20px;
  text-decoration: none;
  transform: none;
  transition: opacity 200ms ease;
}

.fe-dashboard-shell .fe-dashboard-v2 button.fe-dashboard-v2-cta:hover,
.fe-dashboard-shell .fe-dashboard-v2 a.fe-dashboard-v2-cta:hover {
  background-color: #FF6B4A !important;
  box-shadow: none;
  opacity: 0.88 !important;
  transform: none;
}

.fe-dashboard-v2-card {
  background: var(--fe-v2-card);
  border-color: var(--fe-v2-border);
  border-radius: 16px;
  padding: 16px;
  transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.fe-dashboard-v2-card::before {
  content: none;
}

.fe-dashboard-v2-card:hover {
  background: var(--fe-v2-card-hover);
  border-color: var(--fe-v2-border-strong);
  box-shadow: none;
  transform: scale(1.01);
}

.fe-dashboard-v2-card--timeline {
  min-height: 215px;
  padding: 16px 20px;
}

.fe-dashboard-v2-card--review,
.fe-dashboard-v2-card--signals {
  height: 226px;
  min-height: 226px;
}

.fe-dashboard-v2-agent-wrap {
  height: 226px;
  min-height: 226px;
  padding-top: 0;
}

.fe-dashboard-v2-card--library {
  min-height: 270px;
  padding: 16px 20px;
}

.fe-dashboard-v2-card--pipeline {
  min-height: 270px;
}

a.fe-dashboard-v2-card--review,
a.fe-dashboard-v2-card--pipeline {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

a.fe-dashboard-v2-card--review:focus-visible,
a.fe-dashboard-v2-card--pipeline:focus-visible {
  border-color: var(--fe-v2-border-strong);
  outline: 2px solid rgba(245, 200, 66, 0.65);
  outline-offset: 3px;
}

.fe-dashboard-v2-card-header {
  gap: 8px;
  margin-bottom: 16px;
}

.fe-dashboard-v2-card--review .fe-dashboard-v2-card-header,
.fe-dashboard-v2-card--signals .fe-dashboard-v2-card-header {
  margin-bottom: 12px;
}

.fe-dashboard-v2-label-link {
  color: rgba(255, 255, 255, 0.3);
  gap: 8px;
}

.fe-dashboard-v2-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.fe-dashboard-v2-meta,
.fe-dashboard-v2-meta-link {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 400;
}

.fe-dashboard-v2-stat {
  color: rgba(255, 255, 255, 0.4);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 16px;
}

.fe-dashboard-v2-compact-list {
  gap: 10px;
}

.fe-dashboard-v2-compact-row {
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
  gap: 8px;
  padding: 0;
}

.fe-dashboard-v2-compact-row:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
}

.fe-dashboard-v2-card--review:hover .fe-dashboard-v2-compact-row,
.fe-dashboard-v2-card--review:focus-visible .fe-dashboard-v2-compact-row {
  color: rgba(255, 255, 255, 0.9);
}

.fe-dashboard-v2-compact-row strong {
  font-size: 13px;
  font-weight: 500;
}

.fe-dashboard-v2-compact-row small {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 400;
  margin-top: 2px;
}

.fe-dashboard-v2-pill {
  background: rgba(255, 107, 74, 0.12);
  border-color: rgba(255, 107, 74, 0.2);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
}

.fe-dashboard-v2-timeline-row {
  gap: 12px;
  grid-template-columns: 80px minmax(0, 1fr);
}

.fe-dashboard-v2-timeline-days {
  grid-template-columns: 92px repeat(5, minmax(0, 1fr));
  margin-bottom: 12px;
}

.fe-dashboard-v2-timeline-days > span:not(:first-child) {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

.fe-dashboard-v2-timeline-rows {
  gap: 12px;
}

.fe-dashboard-v2-timeline-row {
  color: rgba(255, 255, 255, 0.4);
  padding: 0;
}

.fe-dashboard-v2-timeline-name {
  font-size: 11px;
  font-weight: 500;
}

.fe-dashboard-v2-timeline-track {
  height: 32px;
}

.fe-dashboard-v2-timeline-cell {
  border-color: rgba(255, 255, 255, 0.06);
}

.fe-dashboard-v2-timeline-bar {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: none;
}

.fe-dashboard-v2-agent {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  box-shadow: 0 0 60px rgba(245, 200, 66, 0.4), 0 0 120px rgba(255, 107, 74, 0.2);
}

.fe-dashboard-v2-agent-group:hover .fe-dashboard-v2-agent {
  box-shadow: 0 0 100px rgba(245, 200, 66, 0.7), 0 0 160px rgba(255, 107, 74, 0.4);
  transform: scale(1.05);
}

.fe-dashboard-v2-agent-bubble {
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  border-radius: 20px;
  bottom: calc(100% + 12px);
  padding: 20px 16px 12px;
  width: 280px;
}

.fe-dashboard-v2-agent-heading {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}

.fe-dashboard-v2-agent-copy {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 10px;
}

.fe-dashboard-v2-agent-input {
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  height: 42px;
  padding: 9px 42px 9px 12px;
}

.fe-dashboard-v2-agent-send {
  border-radius: 999px;
  height: 28px;
  right: 6px;
  top: 6px;
  width: 28px;
}

.fe-dashboard-v2-agent-send-icon {
  height: 15px;
  width: 15px;
}

.fe-dashboard-v2-agent-tail {
  border-top-color: rgba(255, 255, 255, 0.9);
}

.fe-dashboard-v2-audio-card,
.fe-dashboard-v2-project-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.fe-dashboard-v2-audio-card:hover,
.fe-dashboard-v2-audio-card:focus-within,
.fe-dashboard-v2-project-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.fe-dashboard-v2-audio-cover {
  aspect-ratio: auto;
  filter: grayscale(0.82) saturate(0.55) brightness(0.58);
  height: 160px;
  opacity: 0.72;
  transition: filter 300ms ease, opacity 300ms ease;
}

.fe-dashboard-v2-card--library:hover .fe-dashboard-v2-audio-cover,
.fe-dashboard-v2-card--library:focus-within .fe-dashboard-v2-audio-cover {
  filter: grayscale(0) saturate(1) brightness(1);
  opacity: 1;
}

.fe-dashboard-v2-audio-info {
  padding: 8px 10px;
}

.fe-dashboard-v2-audio-title {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 500;
}

.fe-dashboard-v2-audio-artist,
.fe-dashboard-v2-audio-duration {
  color: rgba(255, 255, 255, 0.15);
  font-size: 10px;
  font-weight: 400;
  margin-top: 2px;
}

.fe-dashboard-v2-card--library:hover .fe-dashboard-v2-audio-title,
.fe-dashboard-v2-card--library:focus-within .fe-dashboard-v2-audio-title {
  color: rgba(255, 255, 255, 0.9);
}

.fe-dashboard-v2-card--library:hover .fe-dashboard-v2-audio-artist,
.fe-dashboard-v2-card--library:hover .fe-dashboard-v2-audio-duration,
.fe-dashboard-v2-card--library:focus-within .fe-dashboard-v2-audio-artist,
.fe-dashboard-v2-card--library:focus-within .fe-dashboard-v2-audio-duration {
  color: rgba(255, 255, 255, 0.4);
}

.fe-dashboard-v2-project-card {
  color: rgba(255, 255, 255, 0.4);
  padding: 16px;
}

.fe-dashboard-v2-project-card strong {
  font-size: 13px;
  font-weight: 500;
}

.fe-dashboard-v2-project-card small,
.fe-dashboard-v2-project-card > span:last-child {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 400;
}

.fe-dashboard-v2-pipeline-list {
  gap: 10px;
}

.fe-dashboard-v2-pipeline-row {
  color: rgba(255, 255, 255, 0.2);
  font-size: 13px;
  padding: 0;
}

.fe-dashboard-v2-pipeline-row:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.fe-dashboard-v2-pipeline-row strong {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 600;
  min-width: 28px;
  padding: 3px 10px;
}

.fe-dashboard-v2-empty p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 400;
}

.fe-dashboard-v2-empty span {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

.fe-dashboard-v2-modal-backdrop {
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.85);
}

.fe-dashboard-v2-modal-panel {
  background: rgba(15, 15, 15, 0.97);
  border-radius: 24px;
}

/* The Figma top navigation is shared by every authenticated role. */
.fe-nav {
  --fe-nav-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fe-nav-collapse-shell {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.fe-nav-collapse-shell::before,
.fe-nav-collapse-shell::after {
  content: none;
}

.fe-nav-bar {
  box-sizing: border-box;
  gap: 16px;
  min-height: 64px;
  padding: 0 32px;
  width: 100%;
}

.fe-nav-logo-link {
  align-items: center;
  display: inline-flex;
  line-height: 0;
  width: 122px;
}

.fe-nav-wordmark {
  color: #ffffff;
  display: block;
  font-family: var(--fe-nav-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}

.fe-nav-brand {
  align-items: center;
  display: flex;
  gap: 10px;
}

.fe-nav .fe-logo-image {
  display: block;
  height: auto;
  mix-blend-mode: screen;
  width: 122px;
}

.fe-nav-links-shell {
  gap: 4px;
}

.fe-nav .fe-nav-link {
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: var(--fe-nav-font);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}

.fe-nav .fe-nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8) !important;
}

.fe-nav .fe-nav-link-placeholder,
.fe-nav .fe-nav-link-placeholder:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: default;
  user-select: none;
}

.fe-nav .fe-nav-link-active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
  font-weight: 600;
}

.fe-nav-tools {
  gap: 8px;
  margin-left: auto;
  padding-right: 0;
}

.fe-nav-notifications-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: center;
  position: relative;
  padding: 0;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  width: 36px;
}

.fe-nav-notifications-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.fe-nav-notifications-button:focus-visible,
.fe-nav-user-trigger:focus-visible,
.fe-nav-menu-toggle:focus-visible {
  outline: 2px solid #f5c842;
  outline-offset: 2px;
}

.fe-nav-notifications-icon {
  height: 16px;
  width: 16px;
}

.fe-nav-notifications-button .fe-nav-notification-badge {
  background: #ff6b4a;
  box-shadow: none;
  color: #ffffff;
  font-family: var(--fe-nav-font);
  position: absolute;
  right: -4px;
  top: -5px;
}

.fe-nav-agent-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 36px;
  height: 36px;
  padding: 0;
  transition: filter 200ms ease, transform 200ms ease;
  width: 36px;
}

.fe-nav-agent-trigger:hover {
  filter: drop-shadow(0 0 10px rgba(245, 200, 66, 0.32));
  transform: translateY(-1px);
}

.fe-nav-agent-trigger[aria-expanded="true"] {
  filter: drop-shadow(0 0 12px rgba(245, 200, 66, 0.5));
}

.fe-nav-agent-trigger:focus-visible {
  outline: 2px solid #f5c842;
  outline-offset: 2px;
}

.fe-nav-agent-smile {
  align-items: center;
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.fe-nav-agent-smile-eyes {
  display: flex;
  gap: 6px;
}

.fe-nav-agent-smile-eyes span {
  background: #111111;
  border-radius: 999px;
  height: 4px;
  width: 4px;
}

.fe-nav-agent-smile-mouth {
  background: #111111;
  border-radius: 0 0 18px 18px;
  height: 8px;
  width: 18px;
}

.fe-nav-user-avatar {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  font-family: var(--fe-nav-font);
  font-size: 11px;
  font-weight: 600;
  height: 36px;
  justify-content: center;
  letter-spacing: 0.04em;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  width: 36px;
}

.fe-nav-user-trigger:hover .fe-nav-user-avatar,
.fe-nav-user-shell[open] .fe-nav-user-avatar {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

body.fe-nav-agent-open {
  overflow: hidden;
}

.fe-nav-agent-launcher {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 100dvh;
  inset: 0;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
  padding: 24px;
  position: fixed;
  z-index: 70;
}

.fe-nav-agent-launcher.hidden {
  display: none;
}

.fe-nav-agent-backdrop {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.76);
  border: 0;
  cursor: default;
  inset: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

.fe-nav-agent-dialog {
  align-items: center;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.fe-nav-agent-bubble {
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  color: #111111;
  padding: 20px 16px 12px;
  position: relative;
  width: 280px;
}

.fe-nav-agent-heading {
  color: #171717;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
}

.fe-nav-agent-copy {
  color: rgba(0, 0, 0, 0.58);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 10px;
}

.fe-nav-agent-form {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 10px;
  box-sizing: border-box;
  height: 42px;
  position: relative;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.fe-nav-agent-form:focus-within {
  border-color: rgba(245, 200, 66, 0.92);
  box-shadow: 0 0 0 2px rgba(245, 200, 66, 0.24);
}

.fe-nav-agent-input {
  background: transparent;
  border: 0;
  border-radius: inherit;
  color: #111111;
  display: block;
  font-family: inherit;
  font-size: 13px;
  height: 100%;
  outline: none;
  padding: 9px 42px 9px 12px;
  width: 100%;
}

.fe-nav-agent-input::placeholder {
  color: rgba(17, 17, 17, 0.43);
}

.fe-nav-agent-send {
  align-items: center;
  background: #f5c842;
  border: 0;
  border-radius: 999px;
  color: #111111;
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 6px;
  top: 6px;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  width: 28px;
}

.fe-nav-agent-send:hover {
  background: #fbd566;
  box-shadow: 0 5px 12px rgba(212, 164, 54, 0.28);
  transform: translateY(-1px);
}

.fe-nav-agent-send:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

.fe-nav-agent-send svg {
  height: 15px;
  width: 15px;
}

.fe-nav-agent-tail {
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid rgba(255, 255, 255, 0.9);
  bottom: -8px;
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
}

.fe-nav-agent-face {
  align-content: center;
  align-items: center;
  animation: fe-dashboard-v2-float 4s ease-in-out infinite;
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-radius: 999px;
  box-shadow: 0 0 60px rgba(245, 200, 66, 0.4), 0 0 120px rgba(255, 107, 74, 0.2);
  display: grid;
  gap: 13px 20px;
  grid-template-columns: repeat(2, 13px);
  grid-template-rows: 13px 33px;
  height: 140px;
  justify-content: center;
  margin-top: 12px;
  width: 140px;
}

.fe-nav-agent-face-eye {
  background: #111111;
  border-radius: 999px;
  height: 13px;
  transform: translateY(-4px);
  width: 13px;
}

.fe-nav-agent-face-mouth {
  background: #111111;
  border-radius: 0 0 66px 66px;
  grid-column: 1 / span 2;
  height: 33px;
  justify-self: center;
  transform: translateY(-4px);
  width: 66px;
}

#nav-agent-launcher .fe-nav-agent-heading {
  color: #171717 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
}

#nav-agent-launcher .fe-nav-agent-copy {
  color: rgba(0, 0, 0, 0.58) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  margin: 0 0 10px !important;
}

#nav-agent-launcher .fe-nav-agent-form > input[type="text"].fe-nav-agent-input {
  appearance: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #171717 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  height: 100% !important;
  line-height: 1.4 !important;
  outline: 0 !important;
  padding: 9px 42px 9px 12px !important;
}

#nav-agent-launcher .fe-nav-agent-form > input[type="text"].fe-nav-agent-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#nav-agent-launcher .fe-nav-agent-form > button[type="submit"].fe-nav-agent-send {
  appearance: none !important;
  background-color: #f5c842 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #111111 !important;
  height: 28px !important;
  padding: 0 !important;
  right: 6px !important;
  top: 6px !important;
  width: 28px !important;
}

#nav-agent-launcher .fe-nav-agent-form > button[type="submit"].fe-nav-agent-send:hover {
  background-color: #fbd566 !important;
}

@media (min-width: 1024px) {
  .fe-nav-bar {
    grid-template-columns: minmax(122px, 1fr) auto minmax(122px, 1fr);
  }

  .fe-nav-brand {
    min-width: 122px;
  }
}

@media (max-width: 1100px) {
  .fe-dashboard-shell .fe-dashboard-main {
    padding: 96px 32px 32px;
  }

  .fe-dashboard-v2-agent-wrap {
    height: 226px;
    min-height: 226px;
    padding-top: 0;
  }

  .fe-dashboard-v2-audio-cover {
    height: 145px;
  }
}

@media (max-width: 720px) {
  .fe-dashboard-v2-hero {
    margin-bottom: 32px;
  }

  .fe-dashboard-v2-card,
  .fe-dashboard-v2-card--timeline,
  .fe-dashboard-v2-card--library {
    border-radius: 16px;
    padding: 16px;
  }

  .fe-dashboard-v2-card--review,
  .fe-dashboard-v2-card--signals {
    height: auto;
    min-height: 226px;
  }

  .fe-dashboard-v2-agent-wrap {
    height: 288px;
    min-height: 288px;
    padding-top: 112px;
  }

  .fe-dashboard-v2-timeline-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .fe-dashboard-v2-timeline-days {
    grid-template-columns: 84px repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .fe-nav-bar {
    padding: 0 16px;
  }

  .fe-nav-brand--with-agent {
    gap: 8px;
  }

  .fe-nav-brand--with-agent .fe-nav-logo-link,
  .fe-nav-brand--with-agent .fe-logo-image {
    width: 96px;
  }

  .fe-nav-agent-launcher {
    padding: 16px;
  }

  .fe-nav-agent-bubble {
    max-width: calc(100vw - 32px);
  }

  .fe-dashboard-shell .fe-dashboard-main {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-nav-agent-trigger,
  .fe-nav-agent-face,
  .fe-nav-agent-send {
    animation: none;
    transition: none;
  }
}

/* Project index v2 -------------------------------------------------------- */
.fe-projects-index-v2 {
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0 auto;
  max-width: 1400px;
  width: 100%;
}

.fe-projects-index-v2 button,
.fe-projects-index-v2 input,
.fe-projects-index-v2 summary {
  font-family: inherit;
}

.fe-projects-shell .fe-projects-main {
  padding-bottom: 48px;
  padding-top: 124px;
}

.fe-projects-index-v2-content {
  width: 100%;
}

.fe-projects-index-v2-header {
  margin-bottom: 20px;
}

.fe-projects-index-v2-kicker {
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.fe-projects-index-v2-title-row {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.fe-projects-index-v2-title {
  color: #fff;
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.fe-projects-index-v2-intro {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 400;
  margin: 4px 0 0;
}

.fe-projects-index-v2-result-count {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  padding: 3px 12px;
}

.fe-projects-index-v2-summary {
  align-items: stretch;
  backdrop-filter: blur(20px);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  display: flex;
  margin-bottom: 20px;
  overflow: hidden;
  padding: 14px 0;
}

.fe-projects-index-v2-summary-item {
  align-items: center;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-height: 40px;
  min-width: 0;
  padding: 0 16px;
  position: relative;
  transition: opacity 180ms ease;
}

.fe-projects-index-v2-summary-item::after {
  content: none;
}

.fe-projects-index-v2-summary-item:hover,
.fe-projects-index-v2-summary-item:focus-visible,
.fe-projects-index-v2-summary-item.is-active {
  background: transparent;
  opacity: 0.75;
  outline: none;
}

.fe-projects-index-v2-summary-item.is-active::after {
  content: none;
}

.fe-projects-index-v2-summary-item--needs-review {
  color: #e8c34d;
}

.fe-projects-index-v2-summary-item--ba-flagged {
  color: #ff766a;
}

.fe-projects-index-v2-summary-item--on-track {
  color: #43c995;
}

.fe-projects-index-v2-summary-item--delivered {
  color: #7fa6ff;
}

.fe-projects-index-v2-summary-value {
  color: currentColor;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.fe-projects-index-v2-summary-item--total .fe-projects-index-v2-summary-value {
  color: rgba(255, 255, 255, 0.74);
}

.fe-projects-index-v2-summary-label {
  color: rgba(255, 255, 255, 0.35);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fe-projects-index-v2-summary-divider {
  align-self: center;
  background: rgba(255, 255, 255, 0.06);
  height: 40px;
  width: 1px;
}

.fe-projects-index-v2-toolbar {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
  z-index: 20;
}

.fe-projects-index-v2-search {
  flex: 1 1 360px;
  min-width: 240px;
  position: relative;
}

.fe-projects-index-v2-search svg {
  color: rgba(255, 255, 255, 0.2);
  height: 15px;
  left: 14px;
  pointer-events: none;
  position: absolute;
  stroke-width: 1.8;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
}

.fe-projects-index-v2-search input {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  height: 42px;
  line-height: 20px;
  outline: none;
  padding: 0 15px 0 39px;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  width: 100%;
}

.fe-projects-index-v2-search input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.fe-projects-index-v2-search input:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.fe-projects-index-v2-search input:focus {
  border-color: rgba(244, 190, 59, 0.52);
  box-shadow: 0 0 0 3px rgba(244, 190, 59, 0.08);
}

.fe-projects-index-v2-filters {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.fe-projects-index-v2-filter {
  min-width: 140px;
  position: relative;
}

.fe-projects-index-v2-filter > summary {
  list-style: none;
}

.fe-projects-index-v2-filter > summary::-webkit-details-marker {
  display: none;
}

.fe-projects-index-v2-filter-trigger {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 500;
  gap: 12px;
  height: 42px;
  justify-content: space-between;
  line-height: 20px;
  outline: none;
  padding: 0 14px;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.fe-projects-index-v2-filter-trigger svg {
  color: rgba(255, 255, 255, 0.3);
  flex: 0 0 auto;
  height: 14px;
  stroke-width: 1.6;
  transition: transform 180ms ease;
  width: 14px;
}

.fe-projects-index-v2-filter-trigger:hover,
.fe-projects-index-v2-filter-trigger:focus-visible,
.fe-projects-index-v2-filter[open] .fe-projects-index-v2-filter-trigger {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.76);
}

.fe-projects-index-v2-filter.has-selection .fe-projects-index-v2-filter-trigger,
.fe-projects-index-v2-filter[open] .fe-projects-index-v2-filter-trigger {
  border-color: rgba(244, 190, 59, 0.38);
  color: #eec657;
}

.fe-projects-index-v2-filter[open] .fe-projects-index-v2-filter-trigger svg {
  transform: rotate(180deg);
}

.fe-projects-index-v2-filter-menu {
  backdrop-filter: blur(24px);
  background: rgba(15, 15, 15, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.52);
  left: 0;
  min-width: 205px;
  overflow: hidden;
  position: absolute;
  top: calc(100% + 7px);
  z-index: 60;
}

.fe-projects-index-v2-filter-options {
  padding: 7px;
}

.fe-projects-index-v2-filter-option {
  align-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 400;
  gap: 9px;
  line-height: 18px;
  min-height: 36px;
  padding: 7px 8px;
  transition: background 150ms ease, color 150ms ease;
}

.fe-projects-index-v2-filter-option:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.fe-projects-index-v2-filter-option input {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.fe-projects-index-v2-filter-checkbox {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  display: flex;
  flex: 0 0 auto;
  height: 15px;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
  width: 15px;
}

.fe-projects-index-v2-filter-checkbox svg {
  color: #16120a;
  height: 10px;
  opacity: 0;
  stroke-width: 2.2;
  transform: scale(0.6);
  transition: opacity 150ms ease, transform 150ms ease;
  width: 10px;
}

.fe-projects-index-v2-filter-option input:checked + .fe-projects-index-v2-filter-checkbox {
  background: #ecc050;
  border-color: #ecc050;
}

.fe-projects-index-v2-filter-option input:checked + .fe-projects-index-v2-filter-checkbox svg {
  opacity: 1;
  transform: scale(1);
}

.fe-projects-index-v2-filter-option input:checked ~ span:last-child {
  color: #fff;
  font-weight: 500;
}

.fe-projects-index-v2-filter-option input:focus-visible + .fe-projects-index-v2-filter-checkbox {
  box-shadow: 0 0 0 3px rgba(236, 192, 80, 0.18);
}

.fe-projects-index-v2-filter-dot {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 5px;
  width: 5px;
}

.fe-projects-index-v2-filter-dot--video,
.fe-projects-index-v2-filter-dot--master-upload,
.fe-projects-index-v2-filter-dot--delivered {
  background: #78a2ff;
}

.fe-projects-index-v2-filter-dot--music,
.fe-projects-index-v2-filter-dot--qc-check {
  background: #b895ff;
}

.fe-projects-index-v2-filter-dot--artwork,
.fe-projects-index-v2-filter-dot--rough-cut,
.fe-projects-index-v2-filter-dot--needs-review {
  background: #e7be4b;
}

.fe-projects-index-v2-filter-dot--content,
.fe-projects-index-v2-filter-dot--on-track {
  background: #42ce98;
}

.fe-projects-index-v2-filter-dot--picture-lock {
  background: #ef8c45;
}

.fe-projects-index-v2-filter-dot--ba-review {
  background: #de8cf4;
}

.fe-projects-index-v2-filter-dot--ba-flagged {
  background: #ff766a;
}

.fe-projects-index-v2-filter-footer {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
}

.fe-projects-index-v2-filter-footer button {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  padding: 5px 7px;
}

.fe-projects-index-v2-filter-footer button:hover,
.fe-projects-index-v2-filter-footer button:focus-visible {
  color: #fff;
  outline: none;
}

.fe-projects-index-v2-filter-footer .fe-projects-index-v2-filter-done {
  background: linear-gradient(110deg, #f1ca57, #e59b42);
  border-radius: 999px;
  color: #17130b;
  font-weight: 600;
  padding: 5px 14px;
}

.fe-projects-index-v2-clear {
  color: rgba(255, 255, 255, 0.38);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  margin-left: 8px;
  text-decoration: none;
  transition: color 160ms ease;
  white-space: nowrap;
}

.fe-projects-index-v2-clear:hover,
.fe-projects-index-v2-clear:focus-visible {
  color: rgba(255, 255, 255, 0.76);
  outline: none;
}

.fe-projects-index-v2-submit {
  background: #eab94a;
  border: 0;
  border-radius: 999px;
  color: #18130a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  padding: 9px 17px;
}

.fe-projects-index-v2-results-frame {
  display: block;
  min-height: 120px;
  position: relative;
  transition: opacity 150ms ease;
}

.fe-projects-index-v2.is-loading .fe-projects-index-v2-results-frame {
  opacity: 0.72;
}

.fe-projects-index-v2-table {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

.fe-projects-index-v2-table-head,
.fe-projects-index-v2-row {
  align-items: center;
  display: grid;
  gap: 0;
  grid-template-columns:
    minmax(180px, 2fr)
    minmax(115px, 1.3fr)
    minmax(130px, 1.5fr)
    minmax(105px, 1.3fr)
    minmax(105px, 1.3fr)
    minmax(110px, 1.3fr)
    minmax(115px, 1.5fr);
}

.fe-projects-index-v2-table-head {
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.25);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 12px 24px;
  text-transform: uppercase;
}

.fe-projects-index-v2-table-body {
  display: block;
}

.fe-projects-index-v2-row {
  animation: fe-project-index-row-enter 360ms both cubic-bezier(0.2, 0.75, 0.25, 1);
  animation-delay: calc(var(--fe-project-row-order, 0) * 28ms);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
  min-height: 0;
  padding: 14px 24px;
  position: relative;
  transition: background 170ms ease;
}

.fe-projects-index-v2-row:last-child {
  border-bottom: 0;
}

.fe-projects-index-v2-row::before {
  content: none;
}

.fe-projects-index-v2-row:hover,
.fe-projects-index-v2-row:focus-visible {
  background: rgba(255, 255, 255, 0.03);
  outline: 1px solid rgba(245, 200, 66, 0.45);
  outline-offset: -1px;
}

.fe-projects-index-v2-row:hover::before,
.fe-projects-index-v2-row:focus-visible::before {
  content: none;
}

.fe-projects-index-v2-cell {
  color: rgba(255, 255, 255, 0.55);
  display: block;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  padding-right: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-v2-cell--name {
  display: block;
}

.fe-projects-index-v2-project-link {
  color: inherit;
  text-decoration: none;
}

.fe-projects-index-v2-project-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgba(245, 200, 66, 0.72);
  outline-offset: 4px;
}

.fe-projects-index-v2-cell--name strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-v2-cell--name small {
  display: none;
}

.fe-projects-index-v2-cell--client,
.fe-projects-index-v2-cell--updated {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-v2-type,
.fe-projects-index-v2-stage,
.fe-projects-index-v2-status {
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  max-width: 100%;
  padding: 4px 10px;
  white-space: nowrap;
}

.fe-projects-index-v2-type--video {
  background: rgba(113, 157, 255, 0.1);
  border-color: rgba(113, 157, 255, 0.18);
  color: #8aacfa;
}

.fe-projects-index-v2-type--music {
  background: rgba(183, 143, 255, 0.1);
  border-color: rgba(183, 143, 255, 0.18);
  color: #c3a1ff;
}

.fe-projects-index-v2-type--artwork {
  background: rgba(231, 190, 75, 0.1);
  border-color: rgba(231, 190, 75, 0.18);
  color: #e8c85d;
}

.fe-projects-index-v2-type--content {
  background: rgba(62, 204, 149, 0.1);
  border-color: rgba(62, 204, 149, 0.18);
  color: #55d7a6;
}

.fe-projects-index-v2-stage {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.58) !important;
}

.fe-projects-index-v2-stage--rough-cut {
  color: #dfbc54;
}

.fe-projects-index-v2-stage--picture-lock {
  color: #ed914f;
}

.fe-projects-index-v2-stage--master-upload {
  color: #7fa4f8;
}

.fe-projects-index-v2-stage--qc-check {
  color: #b797ed;
}

.fe-projects-index-v2-stage--ba-review {
  color: #d492e8;
}

.fe-projects-index-v2-stage--delivered {
  color: #64d2a4;
}

.fe-projects-index-v2-status--needs-review {
  background: rgba(231, 190, 75, 0.12);
  color: #e7c454;
}

.fe-projects-index-v2-status--ba-flagged {
  background: rgba(255, 105, 94, 0.12);
  color: #ff8076;
}

.fe-projects-index-v2-status--on-track {
  background: rgba(62, 204, 149, 0.12);
  color: #50d2a0;
}

.fe-projects-index-v2-status--delivered {
  background: rgba(113, 157, 255, 0.12);
  color: #8aacfa;
}

.fe-projects-index-v2-team {
  align-items: center;
  display: flex;
  min-height: 26px;
  overflow: visible;
}

.fe-projects-index-v2-team-stack {
  align-items: center;
  display: flex;
}

.fe-projects-index-v2-avatar {
  align-items: center;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.2), transparent 35%),
    linear-gradient(145deg, #735f47, #3a3030);
  border: 2px solid #171717;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.84);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 7px;
  font-weight: 600;
  height: 26px;
  justify-content: center;
  letter-spacing: -0.02em;
  margin-left: -8px;
  width: 26px;
}

.fe-projects-index-v2-avatar:first-child {
  margin-left: 0;
}

.fe-projects-index-v2-avatar:nth-child(2) {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.18), transparent 35%),
    linear-gradient(145deg, #75575f, #372e3b);
}

.fe-projects-index-v2-avatar:nth-child(3) {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.18), transparent 35%),
    linear-gradient(145deg, #4b6c64, #293539);
}

.fe-projects-index-v2-avatar--overflow {
  background: #242424;
  color: rgba(255, 255, 255, 0.48);
}

.fe-projects-index-v2 button.fe-projects-index-v2-team-edit {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid #171717;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 26px;
  font-size: 13px;
  font-weight: 400;
  height: 26px;
  justify-content: center;
  line-height: 1;
  margin-left: -8px;
  padding: 0 0 1px;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  width: 26px;
}

.fe-projects-index-v2-team-stack:empty + .fe-projects-index-v2-team-edit {
  margin-left: 0;
}

.fe-projects-index-v2 button.fe-projects-index-v2-team-edit:hover,
.fe-projects-index-v2 button.fe-projects-index-v2-team-edit:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  outline: none;
  transform: translateY(-1px);
}

.fe-projects-index-v2-team-empty {
  color: rgba(255, 255, 255, 0.28);
  font-size: 10px;
  margin-left: 8px;
}

.fe-projects-index-v2-empty {
  align-items: center;
  color: rgba(255, 255, 255, 0.42);
  display: flex;
  justify-content: center;
  min-height: 328px;
  padding: 80px 24px;
  text-align: center;
}

.fe-projects-index-v2-empty-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fe-projects-index-v2-empty-content > svg {
  color: rgba(255, 255, 255, 0.16);
  height: 40px;
  margin-bottom: 12px;
  stroke-width: 2;
  width: 40px;
}

.fe-projects-index-v2-empty h2 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  margin: 0;
}

.fe-projects-index-v2-empty p {
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  line-height: 18px;
  margin: 16px 0 0;
}

.fe-projects-index-v2-empty a {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.58);
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  justify-content: center;
  line-height: 18px;
  margin-top: 20px;
  min-height: 36px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.fe-projects-index-v2-empty a:hover,
.fe-projects-index-v2-empty a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.82);
  outline: none;
}

body.fe-project-index-modal-open {
  overflow: hidden;
}

body.fe-project-index-modal-open [data-page-transition-shell] {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

.fe-projects-index-team-modal {
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  inset: 0;
  justify-content: center;
  min-height: 100dvh;
  opacity: 0;
  padding: 24px;
  pointer-events: none;
  position: fixed;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
  visibility: hidden;
  width: 100%;
  z-index: 90;
}

.fe-projects-index-team-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
  visibility: visible;
}

.fe-projects-index-team-panel {
  background: rgba(15, 15, 15, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  color: #fff;
  max-height: min(720px, calc(100dvh - 48px));
  overflow: hidden;
  transform: translateY(12px) scale(0.94);
  transition: transform 220ms cubic-bezier(0.6, 0.05, 0.01, 0.9);
  width: min(420px, calc(100vw - 48px));
}

.fe-projects-index-team-modal.is-open .fe-projects-index-team-panel {
  transform: translateY(0) scale(1);
}

.fe-projects-index-team-header {
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 20px 24px 16px;
}

.fe-projects-index-team-header h2,
.fe-projects-index-team-confirmation-head h2 {
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
}

.fe-projects-index-team-header p {
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  line-height: 1.4;
  margin: 2px 0 0;
}

.fe-projects-index-team-modal button.fe-projects-index-team-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 30px;
  font-size: 18px;
  font-weight: 300;
  height: 30px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 2px;
  transition: background 150ms ease, color 150ms ease;
  width: 30px;
}

.fe-projects-index-team-modal button.fe-projects-index-team-close:hover,
.fe-projects-index-team-modal button.fe-projects-index-team-close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}

.fe-projects-index-team-roster {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(468px, calc(100dvh - 220px));
  overflow-y: auto;
  padding: 12px 16px;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
  scrollbar-width: thin;
}

.fe-projects-index-team-option {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease;
  width: 100%;
}

.fe-projects-index-team-option:hover:not(:disabled),
.fe-projects-index-team-option:focus-visible:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.fe-projects-index-team-option.is-selected {
  background: rgba(245, 200, 66, 0.08);
  border-color: rgba(245, 200, 66, 0.25);
}

.fe-projects-index-team-option.is-inherited {
  cursor: default;
  opacity: 0.72;
}

.fe-projects-index-team-avatar {
  align-items: center;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.22), transparent 35%),
    linear-gradient(145deg, #735f47, #3a3030);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.88);
  display: inline-flex;
  flex: 0 0 36px;
  font-size: 9px;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  letter-spacing: -0.02em;
  width: 36px;
}

.fe-projects-index-team-option-copy,
.fe-projects-index-team-notified-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.fe-projects-index-team-option-copy strong,
.fe-projects-index-team-notified-copy strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-team-option-copy small,
.fe-projects-index-team-notified-copy small {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 400;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-team-choice {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: transparent;
  display: inline-flex;
  flex: 0 0 20px;
  font-size: 11px;
  height: 20px;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  width: 20px;
}

.fe-projects-index-team-option.is-selected .fe-projects-index-team-choice {
  background: #f5c842;
  border-color: #f5c842;
  color: #111;
}

.fe-projects-index-team-inherited {
  color: rgba(255, 255, 255, 0.3);
  display: none;
  flex: 0 0 auto;
  font-size: 9px;
  text-transform: uppercase;
}

.fe-projects-index-team-option.is-inherited .fe-projects-index-team-inherited {
  display: inline;
}

.fe-projects-index-team-roster-empty {
  align-items: center;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 152px;
  padding: 24px;
  text-align: center;
}

.fe-projects-index-team-roster-empty strong {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 600;
}

.fe-projects-index-team-roster-empty span {
  font-size: 11px;
  line-height: 1.45;
  margin-top: 5px;
  max-width: 250px;
}

.fe-projects-index-team-error {
  background: rgba(255, 107, 74, 0.1);
  border: 1px solid rgba(255, 107, 74, 0.22);
  border-radius: 8px;
  color: #ff8a70;
  font-size: 11px;
  line-height: 1.4;
  margin: 0 24px 12px;
  padding: 8px 10px;
}

.fe-projects-index-team-error[hidden] {
  display: none;
}

.fe-projects-index-team-footer {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  font-size: 12px;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 24px;
}

.fe-projects-index-team-footer > div {
  display: flex;
  gap: 8px;
}

.fe-projects-index-team-cancel,
.fe-projects-index-team-save {
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 34px;
  padding: 8px 16px;
  transition: opacity 150ms ease, background 150ms ease;
}

.fe-projects-index-team-modal button.fe-projects-index-team-cancel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}

.fe-projects-index-team-modal button.fe-projects-index-team-save {
  background: #ffac4a;
  border: 0;
  color: #111;
  font-weight: 600;
  min-width: 102px;
  padding-left: 20px;
  padding-right: 20px;
}

.fe-projects-index-team-modal button.fe-projects-index-team-cancel:hover,
.fe-projects-index-team-modal button.fe-projects-index-team-cancel:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}

.fe-projects-index-team-modal button.fe-projects-index-team-save:hover,
.fe-projects-index-team-modal button.fe-projects-index-team-save:focus-visible {
  opacity: 0.86;
  outline: none;
}

.fe-projects-index-team-modal button.fe-projects-index-team-save:focus-visible,
.fe-projects-index-team-modal button.fe-projects-index-team-cancel:focus-visible,
.fe-projects-index-team-option:focus-visible {
  box-shadow: 0 0 0 2px #0f0f0f, 0 0 0 4px rgba(245, 200, 66, 0.75);
}

.fe-projects-index-team-modal button.fe-projects-index-team-save:disabled {
  cursor: wait;
  opacity: 0.5;
}

.fe-projects-index-team-panel--confirmation {
  width: min(400px, calc(100vw - 48px));
}

.fe-projects-index-team-confirmation-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 28px 24px 20px;
  text-align: center;
}

.fe-projects-index-team-success-icon {
  align-items: center;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 50%;
  color: #34d399;
  display: flex;
  font-size: 20px;
  height: 48px;
  justify-content: center;
  margin: 0 auto 14px;
  width: 48px;
}

.fe-projects-index-team-confirmation-head h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.fe-projects-index-team-confirmation-head p {
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.fe-projects-index-team-confirmation-head p strong {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}

.fe-projects-index-team-notified-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(330px, calc(100dvh - 280px));
  overflow-y: auto;
  padding: 14px 20px;
}

.fe-projects-index-team-notified {
  align-items: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  padding: 10px 12px;
}

.fe-projects-index-team-notified .fe-projects-index-team-avatar {
  flex-basis: 34px;
  height: 34px;
  width: 34px;
}

.fe-projects-index-team-notified-state {
  color: #34d399;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
}

.fe-projects-index-team-notified-state::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 6px;
  margin-right: 5px;
  width: 6px;
}

.fe-projects-index-team-notified-empty {
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  padding: 18px 4px;
  text-align: center;
}

.fe-projects-index-team-confirmation-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: flex-end;
  padding: 14px 24px;
}

@keyframes fe-project-index-row-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .fe-projects-shell .fe-projects-main {
    padding-top: 108px;
  }

  .fe-projects-index-v2-toolbar {
    flex-wrap: wrap;
  }

  .fe-projects-index-v2-search {
    flex-basis: 100%;
  }

  .fe-projects-index-v2-filters {
    flex: 1 1 auto;
  }

  .fe-projects-index-v2-filter {
    flex: 1 1 0;
  }

  .fe-projects-index-v2-table-head,
  .fe-projects-index-v2-row {
    gap: 13px;
    grid-template-columns:
      minmax(175px, 1.7fr)
      minmax(72px, 0.7fr)
      minmax(105px, 1fr)
      minmax(95px, 0.95fr)
      minmax(100px, 1fr)
      minmax(100px, 0.9fr)
      minmax(88px, 0.8fr);
    padding-left: 17px;
    padding-right: 17px;
  }
}

@media (max-width: 900px) {
  .fe-projects-index-v2-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    overflow-x: auto;
  }

  .fe-projects-index-v2-summary-divider {
    display: none;
  }

  .fe-projects-index-v2-table {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .fe-projects-index-v2-table-head {
    display: none;
  }

  .fe-projects-index-v2-table-body {
    display: grid;
    gap: 12px;
  }

  .fe-projects-index-v2-empty {
    background: rgba(17, 17, 17, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
  }

  .fe-projects-index-v2-row {
    background: rgba(17, 17, 17, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    display: grid;
    gap: 14px 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
  }

  .fe-projects-index-v2-row:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .fe-projects-index-v2-cell {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 7px;
    white-space: normal;
  }

  .fe-projects-index-v2-cell::before {
    color: rgba(255, 255, 255, 0.26);
    content: attr(data-label);
    font-size: 8px;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .fe-projects-index-v2-cell--name {
    grid-column: 1 / -1;
  }

  .fe-projects-index-v2-cell--name::before {
    display: none;
  }

  .fe-projects-index-v2-cell--team {
    align-self: end;
  }
}

@media (max-width: 640px) {
  .fe-projects-shell .fe-projects-main {
    padding-bottom: 32px;
    padding-top: 96px;
  }

  .fe-projects-index-v2-header {
    margin-bottom: 18px;
  }

  .fe-projects-index-v2-intro {
    max-width: 270px;
  }

  .fe-projects-index-v2-summary {
    margin-left: -4px;
    margin-right: -4px;
  }

  .fe-projects-index-v2-summary-item {
    min-height: 62px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .fe-projects-index-v2-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .fe-projects-index-v2-filter {
    min-width: 0;
  }

  .fe-projects-index-v2-filter:nth-child(3) {
    grid-column: 1 / -1;
  }

  .fe-projects-index-v2-filter-menu {
    max-width: calc(100vw - 32px);
    min-width: 100%;
  }

  .fe-projects-index-v2-clear {
    margin-left: auto;
    padding: 5px 0;
  }

  .fe-projects-index-v2-row {
    gap: 15px;
    grid-template-columns: 1fr;
  }

  .fe-projects-index-v2-cell--name {
    grid-column: auto;
  }

  .fe-projects-index-v2-cell {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .fe-projects-index-v2-cell--name {
    align-items: flex-start;
    flex-direction: column;
    justify-content: initial;
  }

  .fe-projects-index-team-modal {
    padding: 16px;
  }

  .fe-projects-index-team-panel,
  .fe-projects-index-team-panel--confirmation {
    max-height: calc(100dvh - 32px);
    width: min(420px, calc(100vw - 32px));
  }

  .fe-projects-index-team-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .fe-projects-index-team-footer > div,
  .fe-projects-index-team-cancel,
  .fe-projects-index-team-save {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-projects-index-v2 *,
  .fe-projects-index-v2 *::before,
  .fe-projects-index-v2 *::after,
  .fe-projects-index-team-modal,
  .fe-projects-index-team-panel {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Jupiter Projects index -------------------------------------------------- */
.fe-projects-shell .fe-projects-index-main {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  min-height: 100vh;
  padding: 112px 32px 48px 64px;
}

.fe-projects-index-v2 {
  margin: 0;
  max-width: none;
  width: 100%;
}

.fe-projects-index-v2-header {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fe-projects-index-v2-heading {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
}

.fe-projects-index-v2-title {
  color: #fff;
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.fe-projects-index-v2-intro {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

.fe-projects-index-v2-summary {
  align-items: center;
  backdrop-filter: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex: 0 1 auto;
  gap: 28px;
  margin: 0;
  overflow: visible;
  padding: 0;
}

.fe-projects-index-v2-summary-item {
  align-items: flex-end;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0;
  transition: opacity 0.2s ease;
}

.fe-projects-index-v2-summary-item:hover {
  background: transparent;
  opacity: 0.75;
  outline: none;
}

.fe-projects-index-v2-summary-item.is-active {
  opacity: 1;
}

.fe-projects-index-v2-summary-item:focus-visible {
  background: transparent;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.2);
  opacity: 0.9;
  outline: none;
}

.fe-projects-index-v2-summary-item--needs-review {
  color: #f5c842;
}

.fe-projects-index-v2-summary-item--approved {
  color: #34d399;
}

.fe-projects-index-v2-summary-item--qc-in-progress {
  color: #06b6d4;
}

.fe-projects-index-v2-summary-item--failed {
  color: #ef4444;
}

.fe-projects-index-v2-summary-item--delivered {
  color: #a78bfa;
}

.fe-projects-index-v2-summary-value,
.fe-projects-index-v2-summary-item--total .fe-projects-index-v2-summary-value {
  color: currentColor;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.fe-projects-index-v2-summary-label {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.fe-projects-index-v2-toolbar {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
  z-index: 20;
}

.fe-projects-index-v2-search {
  flex: 1 1 auto;
  min-width: 240px;
  position: relative;
}

.fe-projects-index-v2-search svg {
  color: rgba(255, 255, 255, 0.25);
  height: 15px;
  left: 14px;
  pointer-events: none;
  position: absolute;
  stroke-width: 1.8;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
}

.fe-projects-index-v2-search input,
.fe-projects-index-v2-filter-trigger {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  height: 42px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.fe-projects-index-v2-search input {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  outline: none;
  padding: 0 16px 0 38px;
  width: 100%;
}

.fe-projects-index-v2-search input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.fe-projects-index-v2-search input:hover,
.fe-projects-index-v2-filter-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.fe-projects-index-v2-search input:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: #f5c842;
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.12);
}

.fe-projects-index-v2-filters {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.fe-projects-index-v2-filter {
  min-width: 140px;
  position: relative;
}

.fe-projects-index-v2-filter-trigger {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  gap: 12px;
  line-height: 20px;
  padding: 0 14px;
}

.fe-projects-index-v2-filter-trigger:focus-visible,
.fe-projects-index-v2-filter[open] .fe-projects-index-v2-filter-trigger {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(245, 200, 66, 0.4);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.fe-projects-index-v2-filter.has-selection .fe-projects-index-v2-filter-trigger,
.fe-projects-index-v2-filter[open] .fe-projects-index-v2-filter-trigger {
  border-color: rgba(245, 200, 66, 0.3);
  color: #f5c842;
}

.fe-projects-index-v2-filter-menu {
  background: rgba(15, 15, 15, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  top: calc(100% + 6px);
}

.fe-projects-index-v2-filter-option {
  color: rgba(255, 255, 255, 0.7);
  min-height: 38px;
  padding: 8px;
}

.fe-projects-index-v2-filter-option:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.fe-projects-index-v2-filter-option input:checked + .fe-projects-index-v2-filter-checkbox {
  background: #f5c842;
  border-color: #f5c842;
}

.fe-projects-index-v2-filter-option input:focus-visible + .fe-projects-index-v2-filter-checkbox {
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.18);
}

.fe-projects-index-v2-filter-dot--video,
.fe-projects-index-v2-filter-dot--delivered {
  background: #a78bfa;
}

.fe-projects-index-v2-filter-dot--music,
.fe-projects-index-v2-filter-dot--qc-in-progress {
  background: #06b6d4;
}

.fe-projects-index-v2-filter-dot--artwork,
.fe-projects-index-v2-filter-dot--rough-cut,
.fe-projects-index-v2-filter-dot--needs-review {
  background: #f5c842;
}

.fe-projects-index-v2-filter-dot--content,
.fe-projects-index-v2-filter-dot--approved {
  background: #34d399;
}

.fe-projects-index-v2-filter-dot--locked {
  background: #ff6b4a;
}

.fe-projects-index-v2-filter-dot--ba-review {
  background: #fb923c;
}

.fe-projects-index-v2-filter-dot--failed {
  background: #ef4444;
}

.fe-projects-index-v2-filter-footer .fe-projects-index-v2-filter-done {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  color: #000;
}

.fe-projects-index-v2-clear {
  color: rgba(255, 255, 255, 0.4);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  margin-left: 8px;
  text-decoration: none;
}

.fe-projects-index-v2-clear:hover,
.fe-projects-index-v2-clear:focus-visible {
  color: rgba(255, 255, 255, 0.7);
}

.fe-projects-index-v2-results-frame {
  display: block;
  min-height: 120px;
  position: relative;
  transition: opacity 0.15s ease;
}

.fe-projects-index-v2-table {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  max-width: 100%;
  overflow: hidden;
}

.fe-projects-index-v2-table-head,
.fe-projects-index-v2-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 2fr)
    minmax(0, 3fr)
    80px
    32px
    minmax(0, 1.5fr)
    72px
    64px
    minmax(0, 1.5fr)
    minmax(0, 1.5fr)
    minmax(0, 1fr);
}

.fe-projects-index-v2-table-head {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 10px 32px 10px 24px;
  text-transform: uppercase;
}

.fe-projects-index-v2-row {
  animation: fe-project-index-row-enter 0.2s both ease;
  animation-delay: calc(var(--fe-project-row-order, 0) * 20ms);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  padding: 16px 32px 16px 24px;
  transition: background 0.15s ease;
}

.fe-projects-index-v2-row:hover {
  background: rgba(255, 255, 255, 0.03);
  outline: none;
}

.fe-projects-index-v2-row:focus-visible {
  background: rgba(255, 255, 255, 0.03);
  outline: 1px solid rgba(245, 200, 66, 0.8);
  outline-offset: -1px;
}

.fe-projects-index-v2-cell {
  color: rgba(255, 255, 255, 0.6);
  display: block;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-v2-project-link {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
}

.fe-projects-index-v2-project-link:focus-visible {
  border-radius: 3px;
  outline: 2px solid rgba(245, 200, 66, 0.8);
  outline-offset: 3px;
}

.fe-projects-index-v2-cell--name strong {
  color: #fff;
  display: block;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-v2-cell--name small {
  color: rgba(255, 255, 255, 0.4);
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-v2-cell--artist {
  color: rgba(255, 255, 255, 0.7);
}

.fe-projects-index-v2-cell--runtime,
.fe-projects-index-v2-cell--version,
.fe-projects-index-v2-cell--isrc,
.fe-projects-index-v2-cell--size {
  color: rgba(255, 255, 255, 0.4);
  font-family: monospace;
}

.fe-projects-index-v2-cell--runtime {
  color: rgba(255, 255, 255, 0.5);
}

.fe-projects-index-v2-cell--isrc {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
}

.fe-projects-index-v2-cell--size,
.fe-projects-index-v2-cell--added-by,
.fe-projects-index-v2-cell--activity {
  font-size: 12px;
}

.fe-projects-index-v2-cell--added-by {
  color: rgba(255, 255, 255, 0.45);
}

.fe-projects-index-v2-cell--activity {
  color: rgba(255, 255, 255, 0.4);
}

.fe-projects-index-v2-type {
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  padding: 3px 10px;
  white-space: nowrap;
}

.fe-projects-index-v2-type--video {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

.fe-projects-index-v2-type--music {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
}

.fe-projects-index-v2-type--artwork {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.2);
  color: #f5c842;
}

.fe-projects-index-v2-type--content {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.2);
  color: #34d399;
}

.fe-projects-index-v2-stage {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-v2-stage--rough-cut {
  color: #f5c842 !important;
}

.fe-projects-index-v2-stage--locked {
  color: #ff6b4a !important;
}

.fe-projects-index-v2-stage--ba-review {
  color: #fb923c !important;
}

.fe-projects-index-v2-stage--approved {
  color: #34d399 !important;
}

.fe-projects-index-v2-stage--qc-in-progress {
  color: #06b6d4 !important;
}

.fe-projects-index-v2-stage--delivered {
  color: #a78bfa !important;
}

.fe-projects-index-v2-empty {
  min-height: 400px;
}

@media (max-width: 1180px) {
  .fe-projects-shell .fe-projects-index-main {
    padding: 108px 32px 40px;
  }

  .fe-projects-index-v2-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .fe-projects-index-v2-summary {
    justify-content: flex-end;
    max-width: 100%;
    overflow-x: auto;
    padding: 3px;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
    scrollbar-width: thin;
    width: 100%;
  }

  .fe-projects-index-v2-toolbar {
    flex-wrap: wrap;
  }

  .fe-projects-index-v2-search {
    flex-basis: 100%;
  }

  .fe-projects-index-v2-results-frame {
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
    scrollbar-width: thin;
  }

  .fe-projects-index-v2-table {
    min-width: 1320px;
  }

  .fe-projects-index-v2-table-head,
  .fe-projects-index-v2-row {
    gap: 12px;
    grid-template-columns:
      minmax(0, 2fr)
      minmax(0, 2fr)
      minmax(0, 3fr)
      80px
      32px
      minmax(0, 1.5fr)
      72px
      64px
      minmax(0, 1.5fr)
      minmax(0, 1.5fr)
      minmax(0, 1fr);
    padding-left: 24px;
    padding-right: 32px;
  }
}

@media (max-width: 900px) {
  .fe-projects-index-v2-summary {
    justify-content: flex-start;
  }

  .fe-projects-index-v2-summary-item {
    min-width: 86px;
  }

  .fe-projects-index-v2-results-frame {
    overflow: visible;
    padding-bottom: 0;
  }

  .fe-projects-index-v2-table {
    background: transparent;
    border: 0;
    min-width: 0;
    overflow: visible;
  }

  .fe-projects-index-v2-table-head {
    display: none;
  }

  .fe-projects-index-v2-table-body {
    display: grid;
    gap: 12px;
  }

  .fe-projects-index-v2-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: grid;
    gap: 14px 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
  }

  .fe-projects-index-v2-row:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .fe-projects-index-v2-cell {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    white-space: normal;
  }

  .fe-projects-index-v2-cell::before {
    color: rgba(255, 255, 255, 0.3);
    content: attr(data-label);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .fe-projects-index-v2-cell--name,
  .fe-projects-index-v2-cell--asset-title {
    grid-column: 1 / -1;
  }

  .fe-projects-index-v2-cell--name::before {
    display: none;
  }

  .fe-projects-index-v2-empty {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
  }
}

@media (max-width: 720px) {
  .fe-projects-shell .fe-projects-index-main {
    padding: 96px 16px 32px;
  }

  .fe-projects-index-v2-header {
    margin-bottom: 18px;
  }

  .fe-projects-index-v2-summary {
    gap: 18px;
    margin-left: -3px;
    width: calc(100% + 6px);
  }

  .fe-projects-index-v2-summary-item {
    align-items: flex-start;
    min-width: 82px;
  }

  .fe-projects-index-v2-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .fe-projects-index-v2-filter {
    min-width: 0;
  }

  .fe-projects-index-v2-clear {
    margin-left: auto;
    padding: 5px 0;
  }

  .fe-projects-index-v2-filter-menu {
    max-width: calc(100vw - 32px);
    min-width: 100%;
  }
}

@media (max-width: 560px) {
  .fe-projects-index-v2-row {
    grid-template-columns: 1fr;
  }

  .fe-projects-index-v2-cell--name,
  .fe-projects-index-v2-cell--asset-title {
    grid-column: auto;
  }

  .fe-projects-index-v2-cell {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .fe-projects-index-v2-cell--name {
    align-items: flex-start;
    flex-direction: column;
    justify-content: initial;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-projects-index-v2 *,
  .fe-projects-index-v2 *::before,
  .fe-projects-index-v2 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Figma Make new-project wizard — shared by the dashboard and /projects/new. */
.fe-dashboard-v2-modal {
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  position: fixed;
  z-index: 9999;
}

.fe-dashboard-v2-modal-panel.fe-project-wizard-modal-panel {
  background: rgba(15, 15, 15, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  max-width: 680px;
  min-height: 0;
  overflow: hidden;
  width: 680px;
}

.fe-project-wizard-page {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 150px);
  width: 100%;
}

.fe-project-wizard-standalone {
  background: rgba(15, 15, 15, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  display: flex;
  max-width: 680px;
  overflow: hidden;
  width: 100%;
}

.fe-project-wizard {
  --wizard-accent-gold: #f5c842;
  --wizard-accent-coral: #ff6b4a;
  --wizard-text: #ffffff;
  --wizard-muted: rgba(255, 255, 255, 0.4);
  --wizard-faint: rgba(255, 255, 255, 0.25);
  background: rgba(15, 15, 15, 0.97);
  color: var(--wizard-text);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-height: 85vh;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.fe-project-wizard *,
.fe-project-wizard *::before,
.fe-project-wizard *::after {
  box-sizing: border-box;
}

.fe-project-wizard h1,
.fe-project-wizard h2,
.fe-project-wizard label,
.fe-project-wizard button,
.fe-project-wizard input,
.fe-project-wizard select,
.fe-project-wizard textarea,
.fe-project-wizard a {
  font-family: inherit;
}

.fe-project-wizard .is-hidden {
  display: none !important;
}

.fe-project-wizard-header {
  align-items: center;
  background: rgba(15, 15, 15, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  min-height: 81px;
  padding: 24px 32px;
  position: relative;
  z-index: 2;
}

.fe-project-wizard .fe-project-wizard-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
}

.fe-project-wizard-close,
.fe-project-wizard-member-remove {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.fe-project-wizard-close {
  height: 32px;
  width: 32px;
}

.fe-project-wizard-close:hover,
.fe-project-wizard-member-remove:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.fe-project-wizard-close:focus-visible,
.fe-project-wizard-member-remove:focus-visible,
.fe-project-wizard-primary:focus-visible,
.fe-project-wizard-ghost:focus-visible,
.fe-project-wizard-add-button:focus-visible,
.fe-project-wizard-asset:has(input:focus-visible) {
  outline: 2px solid #f5c842;
  outline-offset: 2px;
}

.fe-project-wizard-close svg {
  height: 14px;
  width: 14px;
}

.fe-project-wizard-progress {
  align-items: center;
  background: rgba(15, 15, 15, 0.97);
  display: flex;
  flex: 0 0 auto;
  padding: 20px 32px 0;
  position: relative;
  z-index: 2;
}

.fe-project-wizard-progress-segment {
  align-items: center;
  display: flex;
}

.fe-project-wizard-progress-segment:not(:last-child) {
  flex: 1 1 0;
}

.fe-project-wizard-progress-item {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
}

.fe-project-wizard-progress-marker {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.25);
  display: inline-flex;
  flex: 0 0 28px;
  font-size: 12px;
  font-weight: 600;
  height: 28px;
  justify-content: center;
  line-height: 1;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
  width: 28px;
}

.fe-project-wizard-progress-marker-icon {
  display: none;
  height: 14px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 14px;
}

.fe-project-wizard-progress-label {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
  white-space: nowrap;
}

.fe-project-wizard-progress-line {
  background: rgba(255, 255, 255, 0.08);
  height: 1px;
  margin: 0 12px;
  min-width: 8px;
  width: 100%;
}

.fe-project-wizard-progress-segment.is-current .fe-project-wizard-progress-marker {
  background: rgba(255, 172, 74, 0.08);
  border: 1px solid #ffac4a;
  color: #ffac4a;
}

.fe-project-wizard-progress-segment.is-complete .fe-project-wizard-progress-marker {
  background: #ffac4a;
  border: 0;
  color: #17110c;
}

.fe-project-wizard-progress-segment.is-current .fe-project-wizard-progress-label,
.fe-project-wizard-progress-segment.is-complete .fe-project-wizard-progress-label {
  color: #ffffff;
}

.fe-project-wizard-progress-segment.is-complete .fe-project-wizard-progress-line {
  background: #ffac4a;
}

.fe-project-wizard-progress-segment.is-complete .fe-project-wizard-progress-marker-number {
  display: none;
}

.fe-project-wizard-progress-segment.is-complete .fe-project-wizard-progress-marker-icon {
  display: block;
}

.fe-project-wizard-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 32px;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  scrollbar-width: thin;
}

.fe-project-wizard-scroll::-webkit-scrollbar {
  width: 6px;
}

.fe-project-wizard-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.fe-project-wizard-step {
  animation: fe-project-wizard-step-in 200ms ease both;
}

.fe-project-wizard-step[hidden] {
  display: none;
}

.fe-project-wizard .fe-project-wizard-section-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 20px;
  outline: none;
}

.fe-project-wizard .fe-project-wizard-section-copy {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  margin: -14px 0 16px;
}

.fe-project-wizard-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fe-project-wizard-field {
  margin-bottom: 18px;
}

.fe-project-wizard-field > label {
  color: rgba(255, 255, 255, 0.4);
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.fe-project-wizard-field > label span {
  color: #ff6b4a;
}

.fe-project-wizard-field input,
.fe-project-wizard-field select,
.fe-project-wizard-field textarea,
.fe-project-wizard-add-member select {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  outline: none;
  padding: 10px 16px;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
  width: 100%;
}

.fe-project-wizard-field input {
  min-height: 41px;
}

.fe-project-wizard-field input[readonly] {
  color: rgba(255, 255, 255, 0.58);
  cursor: default;
}

.fe-project-wizard-field input[type="date"] {
  color-scheme: dark;
}

.fe-project-wizard-field select,
.fe-project-wizard-add-member select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.45) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.45) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 38px;
}

.fe-project-wizard-field select option,
.fe-project-wizard-add-member select option,
.fe-project-wizard-add-member optgroup {
  background: #171717;
  color: #ffffff;
}

.fe-project-wizard-field textarea {
  min-height: 90px;
  resize: none;
}

.fe-project-wizard-field input::placeholder,
.fe-project-wizard-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
  opacity: 1;
}

.fe-project-wizard-field input:focus,
.fe-project-wizard-field select:focus,
.fe-project-wizard-field textarea:focus,
.fe-project-wizard-add-member select:focus {
  border-color: #f5c842;
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.1);
}

.fe-project-wizard-field-hint {
  color: rgba(255, 255, 255, 0.25);
  display: block;
  font-size: 11px;
  margin-top: 6px;
}

.fe-project-wizard-errors {
  align-items: flex-start;
  background: rgba(255, 107, 74, 0.09);
  border: 1px solid rgba(255, 107, 74, 0.28);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  font-size: 12px;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 14px;
}

.fe-project-wizard-errors > svg {
  color: #ff6b4a;
  flex: 0 0 17px;
  height: 17px;
  margin-top: 1px;
  stroke-width: 1.8;
  width: 17px;
}

.fe-project-wizard-errors p {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}

.fe-project-wizard-errors ul {
  list-style: disc;
  margin: 0;
  padding-left: 16px;
}

.fe-project-wizard-assets {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 22px;
}

.fe-project-wizard-asset {
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-height: 104px;
  padding: 16px;
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
}

.fe-project-wizard-asset:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
}

.fe-project-wizard-asset:has(input:checked) {
  background: color-mix(in srgb, var(--asset-accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--asset-accent) 30%, transparent);
}

.fe-project-wizard-asset.is-disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.fe-project-wizard-asset > input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.fe-project-wizard-asset-icon,
.fe-project-wizard-delivery-icon {
  align-items: center;
  background: color-mix(in srgb, var(--asset-accent, #f5c842) 15%, transparent);
  border-radius: 999px;
  color: var(--asset-accent, #f5c842);
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.fe-project-wizard-asset-icon {
  height: 36px;
  width: 36px;
}

.fe-project-wizard-asset-icon svg {
  height: 18px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 18px;
}

.fe-project-wizard-asset-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fe-project-wizard-asset-title {
  align-items: center;
  color: #ffffff;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 7px;
}

.fe-project-wizard-asset-description {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  line-height: 1.4;
}

.fe-project-wizard-phase-pill {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 999px;
  color: #34d399;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  text-transform: uppercase;
}

.fe-project-wizard-asset-check {
  align-items: center;
  background: var(--asset-accent);
  border-radius: 999px;
  color: #000000;
  display: none;
  height: 18px;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 18px;
}

.fe-project-wizard-asset:has(input:checked) .fe-project-wizard-asset-check {
  display: flex;
}

.fe-project-wizard-asset-check svg {
  height: 11px;
  stroke-width: 2.4;
  width: 11px;
}

.fe-project-wizard-video-fields {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 24px;
  padding-bottom: 6px;
}

.fe-project-wizard-team-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.fe-project-wizard-team-heading .fe-project-wizard-section-title {
  margin-bottom: 6px;
}

.fe-project-wizard-members {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.fe-project-wizard-member {
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
}

.fe-project-wizard-avatar {
  align-items: center;
  background: linear-gradient(135deg, rgba(245, 200, 66, 0.28), rgba(255, 107, 74, 0.28));
  border: 1px solid rgba(245, 200, 66, 0.22);
  border-radius: 999px;
  color: #f5c842;
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 11px;
  font-weight: 600;
  height: 32px;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 32px;
}

.fe-project-wizard-member-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.fe-project-wizard-member-copy strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-project-wizard-member-copy small {
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-project-wizard-role-pill {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.6);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
}

.fe-project-wizard-member-remove {
  flex: 0 0 24px;
  height: 24px;
  width: 24px;
}

.fe-project-wizard-member-remove svg {
  height: 11px;
  stroke-linecap: round;
  stroke-width: 1.8;
  width: 11px;
}

.fe-project-wizard-add-member {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.fe-project-wizard-add-member select {
  border-radius: 10px;
  flex: 1 1 auto;
  font-size: 13px;
  min-height: 38px;
  padding: 8px 36px 8px 12px;
}

.fe-project-wizard-add-button {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border: 0;
  border-radius: 10px;
  color: #000000;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  min-height: 38px;
  padding: 8px 16px;
  transition: opacity 200ms ease;
}

.fe-project-wizard-add-button:hover {
  opacity: 0.88;
}

.fe-project-wizard-add-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.fe-project-wizard-empty-note {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  margin: 10px 0 0;
}

.fe-project-wizard-delivery {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(245, 200, 66, 0.15);
  border-radius: 14px;
  padding: 20px;
}

.fe-project-wizard-delivery-heading {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.fe-project-wizard-delivery-icon {
  height: 32px;
  width: 32px;
}

.fe-project-wizard-delivery-icon svg {
  height: 16px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 16px;
}

.fe-project-wizard-delivery-heading > span:nth-child(2) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.fe-project-wizard-delivery-heading strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.fe-project-wizard-delivery-heading small {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  margin-top: 2px;
}

.fe-project-wizard-asset-pill {
  background: color-mix(in srgb, var(--asset-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--asset-accent) 30%, transparent);
  border-radius: 999px;
  color: var(--asset-accent);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
}

.fe-project-wizard-delivery-destination {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  padding: 13px 14px;
}

.fe-project-wizard-delivery-destination > span,
.fe-project-wizard-requirements-label,
.fe-project-wizard-review-label {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fe-project-wizard-delivery-destination strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  margin-top: 7px;
}

.fe-project-wizard-delivery-destination small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 3px;
}

.fe-project-wizard-requirements {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 16px;
  padding-top: 14px;
}

.fe-project-wizard-requirements-label {
  display: block;
  margin-bottom: 10px;
}

.fe-project-wizard-requirement {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 10px 14px;
}

.fe-project-wizard-requirement > span {
  display: flex;
  flex-direction: column;
  padding-right: 12px;
}

.fe-project-wizard-requirement strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
}

.fe-project-wizard-requirement small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 2px;
}

.fe-project-wizard-requirement em {
  background: rgba(52, 211, 153, 0.12);
  border-radius: 999px;
  color: #34d399;
  flex: 0 0 auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  padding: 3px 8px;
}

.fe-project-wizard-highlights {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 15px 0 0;
  padding: 0;
}

.fe-project-wizard-highlights li {
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  font-size: 11px;
  gap: 8px;
  line-height: 1.45;
}

.fe-project-wizard-highlights li span {
  color: #34d399;
  flex: 0 0 auto;
}

.fe-project-wizard-summary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  margin-bottom: 16px;
  padding: 20px;
}

.fe-project-wizard-summary-heading {
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
}

.fe-project-wizard-summary-heading > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fe-project-wizard-summary-heading strong {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fe-project-wizard-summary-heading small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-top: 4px;
}

.fe-project-wizard-summary-workflow {
  background: rgba(245, 200, 66, 0.15);
  border: 1px solid rgba(245, 200, 66, 0.25);
  border-radius: 999px;
  color: #f5c842;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
}

.fe-project-wizard-summary-details {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.fe-project-wizard-summary-details div {
  min-width: 0;
}

.fe-project-wizard-summary-details dt {
  color: rgba(255, 255, 255, 0.28);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fe-project-wizard-summary-details dd {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.fe-project-wizard-summary-description {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  line-height: 1.55;
  margin: 12px 0 0;
}

.fe-project-wizard-review-block {
  margin-bottom: 16px;
}

.fe-project-wizard-review-label {
  display: block;
  margin-bottom: 8px;
}

.fe-project-wizard-review-team {
  align-items: center;
  display: flex;
  gap: 10px;
}

.fe-project-wizard-review-avatars {
  display: flex;
  flex: 0 0 auto;
}

.fe-project-wizard-review-avatars .fe-project-wizard-avatar {
  border: 2px solid #111111;
  margin-left: -7px;
}

.fe-project-wizard-review-avatars .fe-project-wizard-avatar:first-child {
  margin-left: 0;
}

.fe-project-wizard-review-team > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  line-height: 1.4;
}

.fe-project-wizard-review-delivery {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  padding: 10px 14px;
}

.fe-project-wizard-review-delivery strong {
  color: #ffffff;
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 500;
}

.fe-project-wizard-review-delivery > span:not(.fe-project-wizard-delivery-icon) {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.fe-project-wizard-review-arrow {
  color: rgba(255, 255, 255, 0.3);
  display: block;
  flex: 0 0 14px;
  height: 14px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 14px;
}

.fe-project-wizard-review-delivery em {
  background: rgba(52, 211, 153, 0.12);
  border-radius: 999px;
  color: #34d399;
  flex: 0 0 auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  padding: 2px 7px;
}

.fe-project-wizard-compliance {
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 12px;
  line-height: 1.6;
  margin-top: 4px;
  padding: 14px;
}

.fe-project-wizard-compliance input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.fe-project-wizard-checkbox {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  display: inline-flex;
  flex: 0 0 18px;
  height: 18px;
  justify-content: center;
  margin-top: 1px;
  transition: background 150ms ease, border-color 150ms ease;
  width: 18px;
}

.fe-project-wizard-compliance input:checked + .fe-project-wizard-checkbox {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-color: #f5c842;
  color: #000000;
}

.fe-project-wizard-compliance input:focus-visible + .fe-project-wizard-checkbox {
  outline: 2px solid #f5c842;
  outline-offset: 2px;
}

.fe-project-wizard-checkbox svg {
  display: none;
  height: 11px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  width: 11px;
}

.fe-project-wizard-compliance input:checked + .fe-project-wizard-checkbox svg {
  display: block;
}

.fe-project-wizard-success {
  align-items: center;
  animation: fe-project-wizard-success-in 300ms ease both;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 32px;
  text-align: center;
}

.fe-project-wizard-success-icon {
  align-items: center;
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-radius: 999px;
  box-shadow: 0 0 40px rgba(245, 200, 66, 0.3);
  color: #ffffff;
  display: inline-flex;
  height: 80px;
  justify-content: center;
  margin-bottom: 24px;
  width: 80px;
}

.fe-project-wizard-success-icon svg {
  height: 32px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 32px;
}

.fe-project-wizard-success h2 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 8px;
}

.fe-project-wizard-success p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  margin: 0 0 6px;
}

.fe-project-wizard-success small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  line-height: 1.6;
}

.fe-project-wizard-success-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.fe-project-wizard-footer {
  align-items: center;
  background: rgba(15, 15, 15, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  min-height: 81px;
  padding: 20px 32px;
  position: relative;
  z-index: 2;
}

.fe-project-wizard-primary,
.fe-project-wizard-ghost {
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  justify-content: center;
  min-height: 40px;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.fe-project-wizard-primary {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border: 0;
  color: #000000;
  font-weight: 600;
  padding: 10px 28px;
}

.fe-project-wizard-primary:hover {
  opacity: 0.88;
}

.fe-project-wizard-primary:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  opacity: 0.4;
}

.fe-project-wizard-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  padding: 10px 20px;
}

.fe-project-wizard-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.fe-project-wizard-spinner {
  animation: fe-project-wizard-spin 700ms linear infinite;
  border: 2px solid rgba(0, 0, 0, 0.24);
  border-radius: 999px;
  border-top-color: #000000;
  height: 14px;
  margin-left: 8px;
  width: 14px;
}

.fe-project-wizard-noscript-actions {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: none;
  justify-content: space-between;
  padding: 20px 32px;
}

.no-js .fe-project-wizard-step[hidden] {
  display: block !important;
}

.no-js .fe-project-wizard-progress,
.no-js .fe-project-wizard-footer {
  display: none !important;
}

.no-js .fe-project-wizard-noscript-actions {
  display: flex !important;
}

.no-js .fe-project-wizard-asset-name,
.no-js .fe-project-wizard-delivery {
  display: block !important;
}

@keyframes fe-project-wizard-step-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fe-project-wizard-success-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fe-project-wizard-spin {
  to { transform: rotate(360deg); }
}

.fe-dashboard-v2-modal:not(.hidden) .fe-project-wizard-modal-panel {
  animation: fe-project-wizard-modal-in 200ms ease both;
}

.fe-dashboard-v2-modal:not(.hidden) {
  animation: fe-project-wizard-backdrop-in 200ms ease both;
}

.fe-project-wizard-custom-url:not(.is-hidden) {
  animation: fe-project-wizard-custom-url-in 200ms ease both;
}

.fe-project-wizard button.fe-project-wizard-create {
  gap: 8px;
}

.fe-project-wizard button.fe-project-wizard-create[aria-busy="true"]:disabled {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border: 0;
  color: #000000;
  opacity: 1;
}

.fe-project-wizard .fe-project-wizard-spinner {
  border-color: rgba(0, 0, 0, 0.3);
  border-top-color: #000000;
  height: 16px;
  margin-left: 0;
  width: 16px;
}

.fe-project-wizard button.fe-project-wizard-create-another {
  padding-left: 24px;
  padding-right: 24px;
}

@keyframes fe-project-wizard-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fe-project-wizard-modal-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fe-project-wizard-custom-url-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .fe-dashboard-v2-modal {
    align-items: flex-end;
    padding: 0;
  }

  .fe-dashboard-v2-modal-panel.fe-project-wizard-modal-panel {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 94vh;
    max-width: none;
    width: 100%;
  }

  .fe-project-wizard {
    max-height: 94vh;
  }

  .fe-project-wizard-header {
    min-height: 70px;
    padding: 19px 20px;
  }

  .fe-project-wizard-progress {
    padding: 16px 20px 0;
  }

  .fe-project-wizard-progress-label {
    display: none;
  }

  .fe-project-wizard-progress-line {
    margin: 0 7px;
  }

  .fe-project-wizard-scroll {
    padding: 24px 20px;
  }

  .fe-project-wizard-footer,
  .fe-project-wizard-noscript-actions {
    min-height: 74px;
    padding: 16px 20px;
  }

  .fe-project-wizard-grid,
  .fe-project-wizard-assets,
  .fe-project-wizard-summary-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .fe-project-wizard-add-member {
    align-items: stretch;
    flex-direction: column;
  }

  .fe-project-wizard-add-button {
    width: 100%;
  }

  .fe-project-wizard-review-delivery {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fe-project-wizard-review-delivery strong {
    flex-basis: calc(100% - 42px);
  }

  .fe-project-wizard-review-arrow {
    display: none;
  }

  .fe-project-wizard-member {
    gap: 9px;
    padding: 9px 10px;
  }

  .fe-project-wizard-role-pill {
    padding-left: 7px;
    padding-right: 7px;
  }

  .fe-project-wizard-success {
    padding: 38px 4px;
  }

  .fe-project-wizard-success-actions {
    flex-direction: column;
    width: 100%;
  }

  .fe-project-wizard-success-actions > * {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-project-wizard *,
  .fe-project-wizard *::before,
  .fe-project-wizard *::after,
  .fe-dashboard-v2-modal:not(.hidden) .fe-project-wizard-modal-panel {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Dashboard-only New Project modal, matched to the Jupiter reference. */
.fe-project-wizard--dashboard-modal .fe-project-wizard-progress-segment.is-current .fe-project-wizard-progress-marker {
  background: rgba(245, 200, 66, 0.15);
  border: 1.5px solid #f5c842;
  color: #f5c842;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-progress-segment.is-complete .fe-project-wizard-progress-marker,
.fe-project-wizard--dashboard-modal .fe-project-wizard-progress-segment.is-complete .fe-project-wizard-progress-line {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-assets {
  margin-bottom: 8px;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  min-height: 188px;
  padding: 20px;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset.is-selected {
  background: color-mix(in srgb, var(--asset-accent) 6%, transparent);
  border-color: var(--asset-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--asset-accent) 20%, transparent);
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset-select {
  display: block;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset-icon {
  border-radius: 12px;
  height: 42px;
  margin-bottom: 14px;
  width: 42px;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset-icon svg {
  height: 20px;
  width: 20px;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset-title,
.fe-project-wizard--dashboard-modal .fe-project-wizard-asset-copy strong {
  color: rgba(255, 255, 255, 0.8);
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset.is-selected .fe-project-wizard-asset-title {
  color: #ffffff;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset-description,
.fe-project-wizard--dashboard-modal .fe-project-wizard-asset-copy small {
  color: rgba(255, 255, 255, 0.35);
  display: block;
  font-size: 12px;
  line-height: 1.6;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset-check {
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  display: flex;
  height: 22px;
  right: 14px;
  top: 14px;
  width: 22px;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset.is-selected .fe-project-wizard-asset-check {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-color: transparent;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset-check svg {
  display: none;
  height: 12px;
  width: 12px;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset.is-selected .fe-project-wizard-asset-check svg {
  display: block;
}

.fe-project-wizard-isrc {
  display: none;
  margin-top: 14px;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-asset.is-selected .fe-project-wizard-isrc {
  animation: fe-project-wizard-custom-url-in 200ms ease both;
  display: block;
}

.fe-project-wizard-isrc input,
.fe-project-wizard-custom-role input,
.fe-project-wizard-invite-member input,
.fe-project-wizard-invite-member select {
  appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  min-height: 38px;
  outline: none;
  padding: 8px 12px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  width: 100%;
}

.fe-project-wizard-isrc input {
  font-size: 12px;
}

.fe-project-wizard-isrc input::placeholder,
.fe-project-wizard-custom-role input::placeholder,
.fe-project-wizard-invite-member input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.fe-project-wizard-isrc input:focus {
  border-color: var(--asset-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--asset-accent) 13%, transparent);
}

.fe-project-wizard-isrc small {
  color: rgba(255, 255, 255, 0.2);
  display: block;
  font-size: 10px;
  line-height: 1.4;
  margin-top: 4px;
}

.fe-project-wizard-team-tabs {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  display: flex;
  gap: 4px;
  margin: 14px 0;
  padding: 4px;
}

.fe-project-wizard-team-tabs button {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  flex: 1 1 0;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 0;
  transition: background 200ms ease, color 200ms ease;
}

.fe-project-wizard-team-tabs button[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.fe-project-wizard-team-tabs button:focus-visible {
  box-shadow: 0 0 0 2px #f5c842;
  outline: none;
}

.fe-project-wizard-team-panel {
  margin-bottom: 28px;
}

.fe-project-wizard-custom-role {
  margin-top: 8px;
}

.fe-project-wizard-custom-role input:focus,
.fe-project-wizard-invite-member input:focus,
.fe-project-wizard-invite-member select:focus {
  border-color: #f5c842;
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.1);
}

.fe-project-wizard-invite-member {
  align-items: center;
  display: flex;
  gap: 8px;
}

.fe-project-wizard-invite-member input {
  flex: 1 1 auto;
  min-width: 0;
}

.fe-project-wizard-invite-member select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.45) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.45) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  flex: 0 0 auto;
  padding-right: 38px;
  width: auto;
}

.fe-project-wizard-invite-member select option {
  background: #171717;
  color: #ffffff;
}

.fe-project-wizard-invite-hint {
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  line-height: 1.5;
  margin: 8px 0 0;
}

.fe-project-wizard-member.is-pending {
  background: rgba(245, 200, 66, 0.04);
  border-color: rgba(245, 200, 66, 0.15);
}

.fe-project-wizard-avatar.is-pending {
  background: rgba(245, 200, 66, 0.1);
  border: 1px dashed rgba(245, 200, 66, 0.3);
  color: #f5c842;
}

.fe-project-wizard-pending-pill {
  background: rgba(245, 200, 66, 0.1);
  border: 1px solid rgba(245, 200, 66, 0.25);
  border-radius: 999px;
  color: #f5c842;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
}

.fe-project-wizard-delivery-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 2px;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-delivery-section > .fe-project-wizard-section-title {
  margin-top: 24px;
}

.fe-project-wizard--dashboard-modal .fe-project-wizard-delivery {
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .fe-project-wizard--dashboard-modal .fe-project-wizard-asset {
    min-height: 0;
  }

  .fe-project-wizard-invite-member {
    align-items: stretch;
    flex-direction: column;
  }

  .fe-project-wizard-invite-member select,
  .fe-project-wizard-invite-member .fe-project-wizard-add-button {
    width: 100%;
  }

  .fe-project-wizard--dashboard-modal .fe-project-wizard-member {
    flex-wrap: wrap;
  }

  .fe-project-wizard--dashboard-modal .fe-project-wizard-member-copy {
    flex-basis: calc(100% - 45px);
  }
}

/* Global notifications drawer */
html.fe-notifications-scroll-locked,
body.fe-notifications-scroll-locked {
  overflow: hidden;
}

.fe-nav button.fe-nav-link,
button.fe-dashboard-v2-label-link,
button.fe-dashboard-v2-compact-row {
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.fe-nav button.fe-nav-link {
  justify-content: flex-start;
}

button.fe-dashboard-v2-label-link,
button.fe-dashboard-v2-compact-row {
  background: transparent;
}

.fe-notification-count-slot {
  display: contents;
}

.fe-notifications-panel-layer {
  inset: 0;
  pointer-events: none;
  position: fixed;
  visibility: hidden;
  z-index: 70;
  transition: visibility 0s linear 0.28s;
}

.fe-notifications-panel-layer.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.fe-notifications-panel-backdrop {
  background: rgba(0, 0, 0, 0.34);
  inset: 0;
  opacity: 0;
  position: fixed;
  transition: opacity 0.2s ease;
}

.fe-notifications-panel-layer.is-open .fe-notifications-panel-backdrop {
  opacity: 1;
}

.fe-notifications-panel {
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  background: rgba(10, 10, 12, 0.92);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -24px 0 80px rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  width: 360px;
  z-index: 1;
}

.fe-notifications-panel-layer.is-open .fe-notifications-panel {
  transform: translateX(0);
}

.fe-notifications-panel-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.fe-notifications-panel-header {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  min-height: 58px;
  padding: 14px 20px;
}

.fe-notifications-panel-heading {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.fe-notifications-panel-heading-icon {
  color: rgba(255, 255, 255, 0.4);
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.fe-notifications-panel-heading h2 {
  color: #fff;
  font-family: var(--font-fe-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.fe-notifications-panel-count {
  align-items: center;
  background: #ff6b4a;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-family: var(--font-fe-ui);
  font-size: 10px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 18px;
  min-width: 18px;
  padding: 3px 6px;
}

.fe-notifications-panel-close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 28px;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease, color 0.2s ease;
  width: 28px;
}

.fe-notifications-panel-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.fe-notifications-panel-close svg {
  height: 16px;
  width: 16px;
}

.fe-notifications-panel-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
  scrollbar-width: thin;
}

.fe-notifications-panel-row-form {
  display: block;
  margin: 0;
}

.fe-notifications-panel-row {
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: inherit;
  cursor: default;
  display: flex;
  font-family: var(--font-fe-ui);
  gap: 12px;
  margin: 0;
  min-height: 64px;
  padding: 14px 20px;
  text-align: left;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
  width: 100%;
}

a.fe-notifications-panel-row,
button.fe-notifications-panel-row {
  cursor: pointer;
}

.fe-notifications-panel-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.fe-notifications-panel-row--unread {
  border-left-color: #f5c842;
}

.fe-notifications-panel-row-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.3);
  display: inline-flex;
  flex: 0 0 32px;
  height: 32px;
  justify-content: center;
  margin-top: 2px;
  width: 32px;
}

.fe-notifications-panel-row--unread .fe-notifications-panel-row-icon {
  background: rgba(245, 200, 66, 0.15);
  color: #f5c842;
}

.fe-notifications-panel-row-icon svg {
  height: 14px;
  width: 14px;
}

.fe-notifications-panel-row-copy {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.fe-notifications-panel-row-message {
  color: rgba(255, 255, 255, 0.5);
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fe-notifications-panel-row--unread .fe-notifications-panel-row-message {
  color: rgba(255, 255, 255, 0.9);
}

.fe-notifications-panel-row-meta {
  align-items: center;
  color: rgba(255, 255, 255, 0.25);
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  gap: 6px;
  line-height: 1.3;
  margin-top: 6px;
}

.fe-notifications-panel-row-meta > span:first-child {
  color: rgba(255, 255, 255, 0.3);
}

.fe-notifications-panel-unread-dot {
  background: #f5c842;
  border-radius: 999px;
  flex: 0 0 6px;
  height: 6px;
  margin-top: 6px;
  width: 6px;
}

.fe-notifications-panel-empty {
  align-items: center;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 240px;
  padding: 32px 20px;
  text-align: center;
}

.fe-notifications-panel-empty-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.fe-notifications-panel-empty-icon svg {
  height: 17px;
  width: 17px;
}

.fe-notifications-panel-empty p {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-fe-ui);
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 0;
}

.fe-notifications-panel-empty > span:last-child {
  font-family: var(--font-fe-ui);
  font-size: 11px;
  margin-top: 4px;
}

.fe-notifications-panel-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
  padding: 12px 20px;
}

.fe-notifications-panel-mark-all-form {
  margin: 0;
  width: 100%;
}

.fe-notifications-panel-mark-all {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-family: var(--font-fe-ui);
  font-size: 11px;
  padding: 4px;
  text-align: center;
  transition: color 0.2s ease;
  width: 100%;
}

.fe-notifications-panel-mark-all:hover {
  color: rgba(255, 255, 255, 0.6);
}

.fe-notifications-panel-mark-all:disabled {
  cursor: default;
  opacity: 0.5;
}

.fe-notifications-panel-close:focus-visible,
.fe-notifications-panel-row:focus-visible,
.fe-notifications-panel-mark-all:focus-visible {
  outline: 2px solid #f5c842;
  outline-offset: -2px;
}

@media (max-width: 399px) {
  .fe-notifications-panel {
    width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-notifications-panel-layer,
  .fe-notifications-panel-backdrop,
  .fe-notifications-panel {
    transition-duration: 0.001ms !important;
  }
}

/* Project overview -------------------------------------------------------- */
.fe-project-overview,
.fe-video-detail,
.fe-audio-detail,
.fe-artwork-detail,
.fe-content-detail {
  --fe-detail-card-surface: rgba(0, 0, 0, 0.08);
  --fe-detail-card-surface-hover: rgba(0, 0, 0, 0.04);
}

.fe-projects-shell .fe-project-overview-main {
  max-width: none;
  padding: 72px 0 48px;
}

.fe-project-overview {
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: calc(100vh - 72px);
  position: relative;
  width: 100%;
}

.fe-project-overview h1,
.fe-project-overview h2,
.fe-project-overview h3,
.fe-project-overview h4,
.fe-project-overview h5,
.fe-project-overview h6,
.fe-project-overview label {
  font-family: inherit;
}

.fe-project-overview *,
.fe-project-overview *::before,
.fe-project-overview *::after {
  box-sizing: border-box;
}

.fe-project-overview button,
.fe-project-overview input,
.fe-project-overview select,
.fe-project-overview textarea,
.fe-project-overview summary {
  font: inherit;
}

.fe-project-overview [hidden] {
  display: none !important;
}

.fe-overview-subbar {
  background: rgba(4, 4, 4, 0.44);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 72px;
  width: 100%;
}

.fe-overview-subbar__inner {
  align-items: center;
  display: flex;
  height: 100%;
  margin: 0 auto;
  max-width: none;
  padding: 0 36px 0 27px;
  width: 100%;
}

.fe-overview-back {
  align-items: center;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.52);
  display: inline-flex;
  flex: 0 0 auto;
  height: 36px;
  justify-content: center;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  width: 36px;
}

.fe-overview-back svg {
  height: 18px;
  width: 18px;
}

.fe-overview-back:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
}

.fe-overview-breadcrumb {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 9px;
  margin-left: 16px;
  min-width: 0;
}

.fe-overview-breadcrumb a {
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color 160ms ease;
}

.fe-overview-breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.68);
}

.fe-overview-breadcrumb > span {
  color: rgba(255, 255, 255, 0.23);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.fe-overview-breadcrumb strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-project-overview button.fe-overview-request-button {
  align-items: center;
  background: #ff6b4a;
  border: 1px solid #ff6b4a;
  border-radius: 999px;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 650;
  gap: 5px;
  justify-content: center;
  margin-left: auto;
  min-height: 38px;
  padding: 8px 18px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.fe-project-overview button.fe-overview-request-button:hover {
  background: #e85e3e;
  border-color: #e85e3e;
  box-shadow: 0 9px 26px rgba(255, 107, 74, 0.18);
  transform: translateY(-1px);
}

.fe-overview-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  max-width: 1400px;
  padding-top: 47px;
  width: calc(100% - 64px);
}

.fe-overview-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--fe-detail-card-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.fe-overview-hero {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(380px, 37%) 1fr;
  min-height: 130px;
  padding: 20px 28px;
}

.fe-overview-hero__identity {
  align-self: center;
  min-width: 0;
  padding-right: 28px;
}

.fe-overview-hero__identity h1 {
  color: #fff;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  overflow-wrap: anywhere;
}

.fe-overview-hero__identity > p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  line-height: 1.4;
  margin: 3px 0 0;
}

.fe-overview-hero__meta {
  align-items: center;
  display: flex;
  margin-top: 10px;
  min-height: 31px;
}

.fe-overview-delivery {
  align-items: center;
  color: rgba(255, 255, 255, 0.48);
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
  white-space: nowrap;
}

.fe-overview-delivery svg {
  color: rgba(255, 255, 255, 0.34);
  height: 15px;
  width: 15px;
}

.fe-overview-team-label {
  color: rgba(255, 255, 255, 0.24);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  margin-left: 40px;
  margin-right: 9px;
  text-transform: uppercase;
}

.fe-overview-team {
  flex: 0 0 auto;
}

.fe-overview-team .fe-projects-index-v2-avatar,
.fe-overview-row-reviewer .fe-projects-index-v2-avatar {
  border-color: #171717;
  height: 28px;
  width: 28px;
}

.fe-project-overview button.fe-overview-team__edit {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid #171717;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 28px;
  font-size: 14px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  margin-left: -8px;
  padding: 0 0 2px;
  position: relative;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  width: 28px;
  z-index: 4;
}

.fe-overview-team__stack:empty + .fe-overview-team__edit {
  margin-left: 0;
}

.fe-project-overview button.fe-overview-team__edit:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  transform: scale(1.04);
}

.fe-overview-team__empty {
  color: rgba(255, 255, 255, 0.28);
  font-size: 11px;
}

.fe-overview-stats {
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.065);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fe-project-overview button.fe-overview-stat {
  align-items: center;
  align-self: stretch;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.065);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  min-width: 0;
  padding: 8px 5px;
  transition: background 160ms ease, opacity 160ms ease;
}

.fe-project-overview button.fe-overview-stat:last-child {
  border-right: 0;
}

.fe-project-overview button.fe-overview-stat:hover,
.fe-project-overview button.fe-overview-stat.is-active {
  background: rgba(255, 255, 255, 0.026);
}

.fe-overview-stat strong {
  color: #fff;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1;
}

.fe-overview-stat--1 strong {
  color: #34d399;
}

.fe-overview-stat--2 strong {
  color: #f5c842;
}

.fe-overview-stat--3 strong {
  color: #ff5f5f;
}

.fe-overview-stat span {
  color: rgba(255, 255, 255, 0.3);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.fe-overview-pipeline {
  min-height: 140px;
  padding: 21px 28px 18px;
}

.fe-overview-pipeline h2,
.fe-overview-activity h2 {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}

.fe-overview-pipeline__track {
  display: flex;
  list-style: none;
  margin: 18px 0 0;
  padding: 0 5px;
}

.fe-overview-pipeline__step {
  align-items: flex-start;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  position: relative;
}

.fe-overview-pipeline__step:last-child {
  flex: 0 0 36px;
}

.fe-overview-pipeline__step::after {
  background: rgba(255, 255, 255, 0.095);
  content: "";
  height: 2px;
  left: 50px;
  position: absolute;
  right: 12px;
  top: 17px;
}

.fe-overview-pipeline__step.is-complete::after {
  background: linear-gradient(90deg, #f5c842 0%, #ff6b4a 100%);
}

.fe-overview-pipeline__step:last-child::after {
  display: none;
}

.fe-overview-pipeline__marker {
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.34);
  display: inline-flex;
  font-size: 13px;
  font-weight: 650;
  height: 36px;
  justify-content: center;
  position: relative;
  width: 36px;
  z-index: 1;
}

.fe-overview-pipeline__marker svg {
  height: 17px;
  width: 17px;
}

.fe-overview-pipeline__step.is-complete .fe-overview-pipeline__marker {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-color: transparent;
  color: #fff;
}

.fe-overview-pipeline__step.is-current .fe-overview-pipeline__marker {
  animation: fe-overview-stage-pulse 2s ease-in-out infinite;
  background: rgba(245, 200, 66, 0.1);
  border-color: #f5c842;
  color: #f5c842;
}

.fe-overview-pipeline__label {
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  line-height: 1.2;
  max-width: 66px;
  margin-left: -15px;
  text-align: center;
  width: 66px;
}

@keyframes fe-overview-stage-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 200, 66, 0); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px rgba(245, 200, 66, 0.04); transform: scale(1.045); }
}

.fe-overview-assets {
  position: relative;
  scroll-margin-top: 92px;
  z-index: 2;
}

.fe-overview-assets__toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 53px;
  position: relative;
  z-index: 3;
}

.fe-overview-assets__toolbar > h2 {
  color: #fff;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  margin: 0;
}

.fe-overview-filters {
  align-items: center;
  display: flex;
  gap: 10px;
}

.fe-overview-filter {
  min-width: 140px;
  position: relative;
}

.fe-overview-filter[open] {
  z-index: 2;
}

.fe-overview-filter > summary {
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 550;
  gap: 14px;
  height: 42px;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.fe-overview-filter > summary::-webkit-details-marker {
  display: none;
}

.fe-overview-filter > summary svg {
  color: rgba(255, 255, 255, 0.32);
  height: 16px;
  transition: transform 150ms ease;
  width: 16px;
}

.fe-overview-filter[open] > summary,
.fe-overview-filter > summary.has-selection {
  border-color: rgba(245, 200, 66, 0.3);
  color: #f5c842;
}

.fe-overview-filter[open] > summary {
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.08);
}

.fe-overview-filter[open] > summary svg {
  transform: rotate(180deg);
}

.fe-overview-filter__menu {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: rgba(15, 15, 15, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.5);
  left: 0;
  min-width: 190px;
  overflow: hidden;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 30;
}

.fe-overview-filter__head {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  padding: 10px 13px 8px;
}

.fe-overview-filter__head strong {
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 650;
}

.fe-project-overview .fe-overview-filter__head button {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-size: 11px;
  padding: 2px;
}

.fe-overview-filter__option {
  align-items: center;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  gap: 9px;
  min-height: 36px;
  padding: 7px 13px;
  transition: background 130ms ease;
}

.fe-overview-filter__option:hover {
  background: rgba(255, 255, 255, 0.045);
}

.fe-overview-filter__option input {
  accent-color: #f5c842;
  appearance: none;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  height: 15px;
  margin: 0;
  position: relative;
  width: 15px;
}

.fe-overview-filter__option input:checked {
  background: #f5c842;
  border-color: #f5c842;
}

.fe-overview-filter__option input:checked::after {
  border: solid #111;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  height: 7px;
  left: 4px;
  position: absolute;
  top: 2px;
  transform: rotate(45deg);
  width: 4px;
}

.fe-overview-filter__option span {
  flex: 1;
}

.fe-overview-filter__option small {
  color: rgba(255, 255, 255, 0.27);
  font-size: 10px;
}

.fe-project-overview button.fe-overview-filter__done {
  background: linear-gradient(135deg, #f5c842, #ff6b4a);
  border: 0;
  border-radius: 999px;
  color: #111;
  cursor: pointer;
  float: right;
  font-size: 11px;
  font-weight: 700;
  margin: 8px 11px;
  padding: 5px 14px;
}

.fe-project-overview button.fe-overview-filter-clear {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  font-size: 11px;
  padding: 7px 3px;
}

.fe-overview-table {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--fe-detail-card-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.fe-overview-table__header,
.fe-overview-group__row,
.fe-overview-asset-row {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(260px, 26%) 16% 15.5% 17% minmax(120px, 1fr) 28px;
  padding: 0 20px;
}

.fe-overview-table__header {
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.28);
  font-size: 9px;
  font-weight: 650;
  height: 37px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fe-overview-group__row,
.fe-overview-asset-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  color: inherit;
  min-height: 59px;
  outline: none;
  text-decoration: none;
  transition: background 150ms ease;
}

.fe-overview-group:last-child > .fe-overview-group__row,
.fe-overview-group:last-child > .fe-overview-group__nested > .fe-overview-asset-row:last-child,
.fe-overview-asset-row:last-child {
  border-bottom: 0;
}

.fe-overview-group__row:hover,
.fe-overview-group__row.is-expanded,
.fe-overview-asset-row:hover {
  background: rgba(255, 255, 255, 0.055);
}

.fe-overview-group__asset,
.fe-overview-asset-row__asset {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.fe-overview-group__asset strong,
.fe-overview-asset-row__copy strong {
  color: rgba(255, 255, 255, 0.92);
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-overview-asset-row__copy {
  min-width: 0;
}

.fe-overview-asset-row__copy small {
  color: rgba(255, 255, 255, 0.3);
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.fe-overview-asset-icon {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 32px;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.fe-overview-asset-icon svg {
  height: 18px;
  width: 18px;
}

.fe-overview-asset-icon--video {
  background: rgba(167, 139, 250, 0.13);
  color: #a78bfa;
}

.fe-overview-asset-icon--music {
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
}

.fe-overview-asset-icon--artwork {
  background: rgba(245, 200, 66, 0.11);
  color: #d6a915;
}

.fe-overview-asset-icon--content {
  background: rgba(52, 211, 153, 0.11);
  color: #34d399;
}

.fe-overview-count,
.fe-overview-status {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.42);
  display: inline-flex;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 10px;
  width: fit-content;
}

.fe-overview-status {
  font-size: 10px;
  padding: 5px 10px;
}

.fe-overview-status--approved {
  background: rgba(52, 211, 153, 0.11);
  border-color: rgba(52, 211, 153, 0.15);
  color: #50d2a0;
}

.fe-overview-status--delivered {
  background: rgba(113, 157, 255, 0.11);
  border-color: rgba(113, 157, 255, 0.15);
  color: #8aacfa;
}

.fe-overview-status--in-review {
  background: rgba(245, 200, 66, 0.1);
  border-color: rgba(245, 200, 66, 0.15);
  color: #e7c454;
}

.fe-overview-status--qc-failed {
  background: rgba(255, 95, 95, 0.1);
  border-color: rgba(255, 95, 95, 0.15);
  color: #ff7770;
}

.fe-overview-cell {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
}

.fe-overview-group__chevron,
.fe-overview-row-chevron {
  color: rgba(255, 255, 255, 0.26);
  font-size: 18px;
  justify-self: end;
  line-height: 1;
  transition: transform 150ms ease, color 150ms ease;
}

.fe-overview-group__row.is-expanded .fe-overview-group__chevron {
  color: rgba(255, 255, 255, 0.55);
  transform: rotate(180deg);
}

.fe-overview-group__nested {
  background: rgba(255, 255, 255, 0.014);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.fe-overview-asset-row--nested {
  padding-left: 20px;
}

.fe-overview-asset-row--nested .fe-overview-asset-row__asset {
  padding-left: 44px;
}

.fe-overview-asset-row--nested .fe-overview-asset-icon {
  height: 28px;
  width: 28px;
  flex-basis: 28px;
}

.fe-overview-row-reviewer {
  align-items: center;
  display: flex;
  min-height: 28px;
}

.fe-overview-row-reviewer__empty {
  color: rgba(255, 255, 255, 0.24);
  font-size: 12px;
}

.fe-overview-flat-view.is-empty {
  min-height: 0;
}

.fe-overview-empty {
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  min-height: 170px;
  justify-content: center;
  padding: 30px;
  text-align: center;
}

.fe-overview-empty svg {
  height: 32px;
  margin-bottom: 9px;
  width: 32px;
}

.fe-overview-empty strong {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
}

.fe-overview-empty span {
  font-size: 11px;
  margin-top: 3px;
}

.fe-overview-activity {
  min-height: 260px;
  padding: 21px 28px 18px;
  position: relative;
  z-index: 1;
}

.fe-overview-activity ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.fe-overview-activity li {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.fe-overview-activity__icon {
  align-items: center;
  background: rgba(255, 107, 74, 0.1);
  border-radius: 50%;
  color: #ff6b4a;
  display: inline-flex;
  flex: 0 0 28px;
  font-size: 18px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  width: 28px;
}

.fe-overview-activity__icon--green,
.fe-overview-activity__icon--mint {
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
}

.fe-overview-activity li > span:last-child {
  min-width: 0;
  padding-top: 1px;
}

.fe-overview-activity li strong {
  color: rgba(255, 255, 255, 0.7);
  display: block;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.35;
}

.fe-overview-activity li small {
  color: rgba(255, 255, 255, 0.3);
  display: block;
  font-size: 10px;
  margin-top: 3px;
}

.fe-overview-activity__empty {
  color: rgba(255, 255, 255, 0.32);
  font-size: 12px;
  margin: 18px 0 0;
}

.fe-project-overview :is(a, button, summary, input, select, textarea):focus-visible,
.fe-request-asset-modal :is(button, input, select, textarea):focus-visible {
  outline: 2px solid #f5c842;
  outline-offset: 2px;
}

body.fe-request-asset-modal-open {
  overflow: hidden;
}

body.fe-request-asset-modal-open [data-page-transition-shell] {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

.fe-request-asset-modal {
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: 24px;
  pointer-events: none;
  position: fixed;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
  visibility: hidden;
  z-index: 95;
}

.fe-request-asset-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
  visibility: visible;
}

.fe-request-asset-backdrop {
  inset: 0;
  position: absolute;
}

.fe-request-asset-panel {
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 0 60px rgba(245, 200, 66, 0.1);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;
  position: relative;
  transform: translateY(12px) scale(0.96);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  width: min(580px, calc(100vw - 48px));
  z-index: 1;
}

.fe-request-asset-modal.is-open .fe-request-asset-panel {
  transform: translateY(0) scale(1);
}

.fe-request-asset-header {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fe-request-asset-header h2 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}

.fe-request-asset-header p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  line-height: 1.625;
  margin: 4px 0 0;
  max-width: 430px;
}

.fe-project-overview button.fe-request-asset-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 28px;
  height: 28px;
  justify-content: center;
  margin-top: 2px;
  padding: 0;
  transition: background 150ms ease, color 150ms ease;
  width: 28px;
}

.fe-project-overview button.fe-request-asset-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}

.fe-request-asset-close svg {
  height: 16px;
  width: 16px;
}

.fe-request-asset-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  scrollbar-width: thin;
}

.fe-request-asset-body::-webkit-scrollbar {
  width: 6px;
}

.fe-request-asset-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.fe-request-asset-body::-webkit-scrollbar-track {
  background: transparent;
}

.fe-request-asset-divider,
.fe-request-section-divider {
  background: rgba(255, 255, 255, 0.06);
  height: 1px;
}

.fe-request-asset-divider {
  margin-bottom: 20px;
}

.fe-request-step-indicator {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

.fe-request-step-indicator span {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-radius: 999px;
  flex: 1 1 0;
  height: 3px;
}

.fe-request-step-indicator span + span {
  background: rgba(255, 255, 255, 0.08);
  transition: background 300ms ease;
}

.fe-request-step-indicator span + span.is-active {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
}

.fe-request-workflow {
  border: 0;
  margin: 0;
  padding: 0;
}

.fe-request-workflow legend {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.fe-request-workflow__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fe-project-overview button.fe-request-workflow__card {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  display: flex;
  gap: 16px;
  min-height: 66px;
  padding: 14px 16px;
  text-align: left;
  transition: background 200ms ease, border-color 200ms ease;
  width: 100%;
}

.fe-project-overview button.fe-request-workflow__card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.fe-project-overview button.fe-request-workflow__card.is-selected {
  background: rgba(245, 200, 66, 0.06);
  border-color: rgba(245, 200, 66, 0.35);
}

.fe-request-workflow__icon {
  color: rgba(255, 255, 255, 0.25);
  display: inline-flex;
  flex: 0 0 16px;
  height: 16px;
  transition: color 200ms ease;
  width: 16px;
}

.fe-request-workflow__icon svg {
  height: 16px;
  width: 16px;
}

.fe-request-workflow__card.is-selected .fe-request-workflow__icon {
  color: #f5c842;
}

.fe-request-workflow__radio {
  align-items: center;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 16px;
  height: 16px;
  justify-content: center;
  transition: border-color 200ms ease;
  width: 16px;
}

.fe-request-workflow__radio i {
  background: #f5c842;
  border-radius: 50%;
  display: block;
  height: 8px;
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 200ms ease, transform 200ms ease;
  width: 8px;
}

.is-selected .fe-request-workflow__radio {
  border-color: #f5c842;
}

.is-selected .fe-request-workflow__radio i {
  opacity: 1;
  transform: scale(1);
}

.fe-request-workflow__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.fe-request-workflow__card strong {
  color: rgba(255, 255, 255, 0.5);
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  transition: color 200ms ease;
}

.fe-request-workflow__card small {
  color: rgba(255, 255, 255, 0.2);
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
  transition: color 200ms ease;
}

.fe-request-workflow__card.is-selected strong {
  color: #fff;
}

.fe-request-workflow__card.is-selected small {
  color: rgba(255, 255, 255, 0.45);
}

.fe-request-audio-form {
  margin-top: 20px;
}

.fe-request-audio-form.is-entering {
  animation: fe-request-audio-enter 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fe-request-audio-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fe-request-creator-step.is-entering {
  animation: fe-request-step-enter 220ms ease both;
}

@keyframes fe-request-step-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fe-request-creator-step h3 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 6px;
}

.fe-request-creator-step__intro {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.fe-request-creator-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fe-request-form-section {
  margin-top: 20px;
}

.fe-request-form-section h3 {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.3;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.fe-request-section-copy {
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  line-height: 1.5;
  margin: -5px 0 12px;
}

.fe-request-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fe-request-field {
  display: block;
}

.fe-request-field > span:first-child {
  color: rgba(255, 255, 255, 0.4);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.fe-request-field > span:first-child b {
  color: #ff6b4a;
  font-weight: 700;
  margin-left: 2px;
}

.fe-request-field input,
.fe-request-field select,
.fe-request-field textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  min-height: 41px;
  outline: none;
  padding: 10px 16px;
  transition: border-color 200ms ease;
  width: 100%;
}

.fe-request-field input::placeholder,
.fe-request-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.fe-request-field textarea {
  height: 96px;
  resize: none;
}

.fe-request-field input:focus,
.fe-request-field select:focus,
.fe-request-field textarea:focus {
  border-color: #f5c842;
}

.fe-request-field input[type="date"] {
  color-scheme: dark;
}

.fe-request-field > p.fe-request-email-error {
  color: #ef4444;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 6px;
}

.fe-request-email-preview {
  background: rgba(245, 200, 66, 0.04);
  border: 1px solid rgba(245, 200, 66, 0.1);
  border-radius: 12px;
  margin-top: 16px;
  padding: 14px 16px;
}

.fe-request-email-preview__label {
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.fe-request-email-preview__copy {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  line-height: 1.6;
}

.fe-request-email-preview__link {
  align-items: center;
  background: rgba(245, 200, 66, 0.1);
  border: 1px solid rgba(245, 200, 66, 0.15);
  border-radius: 999px;
  color: #f5c842;
  display: inline-flex;
  font-size: 11px;
  gap: 4px;
  margin-top: 8px;
  padding: 3px 10px;
}

.fe-request-field select option,
.fe-request-tag-add select option {
  background: #1a1a1a;
  color: #fff;
}

.fe-request-select {
  display: block;
  margin: 0 !important;
  position: relative;
}

.fe-request-select select {
  appearance: none;
  padding-right: 36px;
}

.fe-request-select svg {
  color: rgba(255, 255, 255, 0.3);
  height: 14px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
}

.fe-request-field > p,
.fe-request-hint {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  line-height: 1.55;
  margin: 6px 0 0;
}

.fe-request-status {
  background: rgba(255, 107, 74, 0.2);
  border: 0.625px solid rgba(255, 107, 74, 0.3);
  border-radius: 999px;
  color: #ff6b4a;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 12px;
}

.fe-request-pack-contents {
  align-items: center;
  display: flex;
  gap: 24px;
}

.fe-request-checkbox {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  position: relative;
  user-select: none;
}

.fe-request-checkbox input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.fe-request-checkbox > span {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  display: inline-flex;
  flex: 0 0 20px;
  height: 20px;
  justify-content: center;
  transition: background 200ms ease, border-color 200ms ease;
  width: 20px;
}

.fe-request-checkbox > span svg {
  color: #000;
  height: 8px;
  opacity: 0;
  width: 10px;
}

.fe-request-checkbox input:checked + span {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-color: transparent;
}

.fe-request-checkbox input:checked + span svg {
  opacity: 1;
}

.fe-request-checkbox input:focus-visible + span {
  outline: 2px solid #f5c842;
  outline-offset: 2px;
}

.fe-request-checkbox strong {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}

.fe-request-tag-select {
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 41px;
  padding: 8px 12px;
  transition: border-color 200ms ease;
  width: 100%;
}

.fe-request-tag-select:focus-within {
  border-color: rgba(255, 255, 255, 0.25);
}

.fe-request-tags__list {
  display: contents;
}

.fe-request-tag {
  align-items: center;
  background: linear-gradient(90deg, #f5c842 0%, #ff6b4a 100%);
  border-radius: 999px;
  color: #000;
  display: inline-flex;
  font-size: 11px;
  font-weight: 500;
  gap: 4px;
  padding: 2px 8px;
}

.fe-project-overview .fe-request-tag button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  height: 12px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 150ms ease;
  width: 12px;
}

.fe-project-overview .fe-request-tag button:hover {
  background: rgba(0, 0, 0, 0.2);
}

.fe-request-tag-add {
  display: inline-flex;
  position: relative;
}

.fe-request-tag-add[hidden] {
  display: none;
}

.fe-request-tag-add select {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  outline: 0;
  padding: 0 16px 0 0;
}

.fe-request-tag-add svg {
  color: rgba(255, 255, 255, 0.3);
  height: 12px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
}

.fe-request-asset-footer {
  align-items: center;
  background: rgba(15, 15, 15, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 28px;
  position: sticky;
  bottom: 0;
}

.fe-request-asset-footer[hidden],
.fe-request-asset-footer button[hidden],
.fe-request-send__spinner[hidden],
.fe-request-success[hidden],
[data-project-overview-target="requestFlow"][hidden],
[data-project-overview-target="requestStepOne"][hidden],
[data-project-overview-target="requestStepTwo"][hidden] {
  display: none;
}

.fe-project-overview button.fe-request-secondary,
.fe-project-overview button.fe-request-primary {
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease, transform 200ms ease;
}

.fe-project-overview button.fe-request-secondary {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
}

.fe-project-overview button.fe-request-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

.fe-project-overview button.fe-request-primary {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border: 0;
  box-shadow: 0 4px 20px rgba(245, 200, 66, 0.3);
  color: #000;
  padding-left: 24px;
  padding-right: 24px;
}

.fe-project-overview button.fe-request-primary:hover {
  box-shadow: 0 6px 28px rgba(245, 200, 66, 0.45);
  transform: scale(1.03);
}

.fe-project-overview button.fe-request-primary:active {
  transform: scale(0.97);
}

.fe-project-overview button.fe-request-primary:disabled {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  opacity: 0.35;
}

.fe-project-overview button.fe-request-primary:disabled:hover {
  box-shadow: none;
  transform: none;
}

.fe-project-overview button.fe-request-send {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}

.fe-project-overview button.fe-request-send[hidden] {
  display: none;
}

.fe-project-overview button.fe-request-send.is-sending:disabled {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  color: #000;
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

.fe-request-send__spinner {
  animation: fe-request-spin 800ms linear infinite;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border-top-color: #000;
  flex: 0 0 14px;
  height: 14px;
  width: 14px;
}

@keyframes fe-request-spin {
  to {
    transform: rotate(360deg);
  }
}

.fe-request-asset-body.is-success {
  display: flex;
  padding: 48px 32px;
}

.fe-request-success {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  width: 100%;
}

.fe-request-success.is-entering {
  animation: fe-request-success-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fe-request-success-enter {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fe-request-success__icon {
  align-items: center;
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(245, 200, 66, 0.3);
  color: #fff;
  display: flex;
  height: 72px;
  justify-content: center;
  margin-bottom: 24px;
  width: 72px;
}

.fe-request-success__icon svg {
  height: 28px;
  width: 28px;
}

.fe-request-success h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
}

.fe-request-success__lead {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin: 0 0 4px;
}

.fe-request-success__email {
  color: #f5c842;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.fe-request-success__workflow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.fe-request-success__workflow > span {
  background: rgba(245, 200, 66, 0.06);
  border: 1px solid rgba(245, 200, 66, 0.35);
  border-radius: 999px;
  color: #f5c842;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
}

.fe-request-success__workflow small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}

.fe-request-success__note {
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 360px;
}

.fe-project-overview button.fe-request-done {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-top: 28px;
  padding: 10px 32px;
  transition: background 200ms ease;
}

.fe-project-overview button.fe-request-done:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 1100px) {
  .fe-overview-content {
    padding-top: 34px;
    width: calc(100% - 48px);
  }

  .fe-overview-hero {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .fe-overview-hero__identity {
    padding: 0 0 20px;
  }

  .fe-overview-stats {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.065);
    min-height: 86px;
  }

  .fe-overview-table__header,
  .fe-overview-group__row,
  .fe-overview-asset-row {
    grid-template-columns: minmax(220px, 31%) 17% 16% 15% minmax(95px, 1fr) 22px;
    padding-left: 17px;
    padding-right: 17px;
  }

  .fe-overview-asset-row--nested {
    padding-left: 17px;
  }

  .fe-overview-asset-row--nested .fe-overview-asset-row__asset {
    padding-left: 31px;
  }
}

@media (max-width: 800px) {
  .fe-overview-subbar {
    height: 64px;
  }

  .fe-overview-subbar__inner {
    padding: 0 20px;
  }

  .fe-project-overview button.fe-overview-request-button {
    min-height: 36px;
    padding: 7px 14px;
  }

  .fe-overview-content {
    gap: 16px;
    padding-top: 24px;
    width: calc(100% - 40px);
  }

  .fe-overview-pipeline {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fe-overview-pipeline::-webkit-scrollbar {
    display: none;
  }

  .fe-overview-pipeline__track {
    min-width: 720px;
  }

  .fe-overview-assets__toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 14px;
  }

  .fe-overview-filters {
    width: 100%;
  }

  .fe-overview-filter {
    flex: 1 1 0;
  }

  .fe-overview-table__header {
    display: none;
  }

  .fe-overview-group__row,
  .fe-overview-asset-row {
    gap: 8px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 86px;
    padding: 14px 17px;
  }

  .fe-overview-group__asset,
  .fe-overview-asset-row__asset {
    grid-column: 1;
  }

  .fe-overview-group__row > :nth-child(2),
  .fe-overview-asset-row > .fe-overview-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .fe-overview-group__row > :nth-child(3),
  .fe-overview-asset-row > .fe-overview-cell--updated {
    grid-column: 1;
    grid-row: 2;
    padding-left: 44px;
  }

  .fe-overview-group__row > :nth-child(4),
  .fe-overview-group__row > :nth-child(5),
  .fe-overview-asset-row > .fe-overview-cell--due,
  .fe-overview-asset-row > .fe-overview-row-reviewer {
    display: none;
  }

  .fe-overview-group__chevron,
  .fe-overview-row-chevron {
    grid-column: 2;
    grid-row: 2;
  }

  .fe-overview-asset-row--nested {
    padding-left: 17px;
  }

  .fe-overview-asset-row--nested .fe-overview-asset-row__asset {
    padding-left: 17px;
  }

}

@media (max-width: 560px) {
  .fe-projects-shell .fe-project-overview-main {
    padding-top: 72px;
  }

  .fe-overview-subbar__inner {
    padding: 0 15px;
  }

  .fe-overview-back {
    height: 34px;
    width: 34px;
  }

  .fe-overview-breadcrumb {
    margin-left: 10px;
  }

  .fe-overview-breadcrumb a,
  .fe-overview-breadcrumb > span {
    display: none;
  }

  .fe-project-overview button.fe-overview-request-button {
    font-size: 0;
    height: 36px;
    padding: 0;
    width: 36px;
  }

  .fe-project-overview button.fe-overview-request-button span {
    font-size: 18px;
  }

  .fe-overview-content {
    padding-top: 18px;
    width: calc(100% - 30px);
  }

  .fe-overview-card {
    border-radius: 14px;
  }

  .fe-overview-hero {
    padding: 20px 18px;
  }

  .fe-overview-hero__identity h1 {
    font-size: 21px;
  }

  .fe-overview-hero__meta {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 0;
  }

  .fe-overview-team-label {
    margin-left: 0;
    width: 100%;
  }

  .fe-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fe-project-overview button.fe-overview-stat {
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    min-height: 74px;
  }

  .fe-project-overview button.fe-overview-stat:nth-child(2) {
    border-right: 0;
  }

  .fe-project-overview button.fe-overview-stat:nth-child(n+3) {
    border-bottom: 0;
  }

  .fe-overview-pipeline,
  .fe-overview-activity {
    padding-left: 18px;
    padding-right: 18px;
  }

  .fe-overview-filters {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fe-overview-filter {
    min-width: 0;
  }

  .fe-overview-filter__menu {
    min-width: 175px;
  }

  .fe-overview-filter:nth-child(2) .fe-overview-filter__menu {
    left: auto;
    right: 0;
  }

  .fe-overview-filter-clear {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .fe-overview-group__asset strong,
  .fe-overview-asset-row__copy strong {
    font-size: 13px;
  }

  .fe-request-asset-modal {
    padding: 16px;
  }

  .fe-request-asset-panel {
    max-height: calc(100dvh - 32px);
    width: calc(100vw - 32px);
  }

  .fe-request-asset-body,
  .fe-request-asset-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .fe-request-workflow__card {
    gap: 12px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .fe-request-pack-contents {
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-project-overview *,
  .fe-project-overview *::before,
  .fe-project-overview *::after,
  .fe-request-asset-modal,
  .fe-request-asset-panel,
  .fe-request-audio-form,
  .fe-request-creator-step,
  .fe-request-success,
  .fe-request-send__spinner {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Project overview Figma alignment -------------------------------------- */
.fe-project-overview {
  --fe-detail-card-surface: rgba(255, 255, 255, 0.03);
  --fe-detail-card-surface-hover: rgba(255, 255, 255, 0.055);
  color: #fff;
  font-family: var(--font-fe-ui, "NeueMontreal", "IBMPlexSans", ui-sans-serif, system-ui, sans-serif);
}

.fe-projects-index-team-modal {
  font-family: var(--font-fe-ui, "NeueMontreal", "IBMPlexSans", ui-sans-serif, system-ui, sans-serif);
}

.fe-overview-subbar {
  background: rgba(4, 4, 4, 0.44);
  height: 72px;
}

.fe-overview-subbar__inner {
  padding: 0 24px;
}

.fe-overview-content {
  gap: 20px;
  max-width: 1400px;
  padding-top: 48px;
  width: calc(100% - 128px);
}

.fe-overview-card,
.fe-overview-table {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: var(--fe-detail-card-surface);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.fe-overview-hero {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  padding: 0 0 32px;
}

.fe-overview-hero__top,
.fe-overview-hero__bottom {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-width: 0;
}

.fe-overview-hero__top {
  align-items: flex-start;
}

.fe-overview-hero__identity {
  min-width: 0;
  padding: 0;
}

.fe-overview-hero__identity h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.fe-overview-hero__identity > p {
  font-size: 14px;
  margin-top: 6px;
}

.fe-project-overview button.fe-overview-request-button {
  font-size: 13px;
  font-weight: 600;
  margin-left: 24px;
  min-height: 38px;
  padding: 8px 18px;
}

.fe-overview-hero__meta {
  align-items: center;
  display: flex;
  margin: 0;
  min-height: 30px;
}

.fe-overview-delivery {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}

.fe-overview-delivery svg {
  color: rgba(255, 255, 255, 0.3);
  height: 13px;
  width: 13px;
}

.fe-overview-hero__separator {
  background: rgba(255, 255, 255, 0.1);
  height: 16px;
  margin: 0 20px;
  width: 1px;
}

.fe-overview-team {
  align-items: center;
  display: flex;
}

.fe-overview-team__stack {
  align-items: center;
  display: inline-flex;
}

.fe-overview-team .fe-projects-index-v2-avatar {
  border-color: rgba(7, 7, 7, 0.95);
  height: 28px;
  width: 28px;
}

.fe-project-overview button.fe-overview-team__edit {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(7, 7, 7, 0.95);
}

.fe-project-overview button.fe-overview-team__manage {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
  min-height: 30px;
  padding: 6px 14px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.fe-project-overview button.fe-overview-team__manage:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.fe-overview-stats {
  align-items: center;
  border: 0;
  display: flex;
  gap: 32px;
  margin-left: auto;
}

.fe-project-overview button.fe-overview-stat {
  align-items: flex-start;
  align-self: auto;
  border: 0;
  gap: 2px;
  min-height: 0;
  padding: 0;
  transition: opacity 160ms ease;
}

.fe-project-overview button.fe-overview-stat:hover {
  background: transparent;
  opacity: 0.75;
}

.fe-project-overview button.fe-overview-stat.is-active {
  background: transparent;
  opacity: 1;
}

.fe-overview-stat strong {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.fe-overview-stat--1 strong {
  color: #34d399;
}

.fe-overview-stat--2 strong {
  color: #fb923c;
}

.fe-overview-stat--3 strong {
  color: #a78bfa;
}

.fe-overview-stat span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.fe-project-overview button.fe-overview-stat.is-active span {
  color: rgba(255, 255, 255, 0.58);
}

.fe-overview-pipeline {
  min-height: 144px;
  padding: 24px 28px;
}

.fe-overview-pipeline h2,
.fe-overview-activity h2 {
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em;
}

.fe-overview-pipeline__track {
  align-items: flex-start;
  margin-top: 20px;
  padding: 0 8px;
}

.fe-overview-pipeline__step {
  align-items: center;
  gap: 6px;
}

.fe-overview-pipeline__step:last-child {
  flex-basis: 36px;
}

.fe-overview-pipeline__step::after {
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
}

.fe-overview-pipeline__label {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  margin-left: 0;
  max-width: none;
  white-space: nowrap;
  width: auto;
}

.fe-overview-pipeline__step.is-current .fe-overview-pipeline__marker {
  background: rgba(245, 200, 66, 0.12);
}

.fe-overview-pipeline__step--locked.is-current .fe-overview-pipeline__marker {
  background: rgba(255, 107, 74, 0.12);
  border-color: #ff6b4a;
  color: #ff6b4a;
}

.fe-overview-pipeline__step--ba_review.is-current .fe-overview-pipeline__marker {
  background: rgba(251, 146, 60, 0.12);
  border-color: #fb923c;
  color: #fb923c;
}

.fe-overview-pipeline__step--approved.is-current .fe-overview-pipeline__marker {
  background: rgba(52, 211, 153, 0.12);
  border-color: #34d399;
  color: #34d399;
}

.fe-overview-pipeline__step--qc_in_progress.is-current .fe-overview-pipeline__marker {
  background: rgba(6, 182, 212, 0.12);
  border-color: #06b6d4;
  color: #06b6d4;
}

.fe-overview-pipeline__step--delivered.is-current .fe-overview-pipeline__marker {
  background: rgba(167, 139, 250, 0.12);
  border-color: #a78bfa;
  color: #a78bfa;
}

.fe-overview-assets__toolbar {
  min-height: 42px;
  margin-bottom: 12px;
}

.fe-overview-assets__toolbar > h2 {
  font-size: 17px;
  font-weight: 600;
}

.fe-overview-filter {
  min-width: 140px;
}

.fe-overview-filter > summary {
  border-radius: 12px;
  height: 42px;
}

.fe-overview-filter__menu {
  background: rgba(15, 15, 15, 0.98);
  border-radius: 12px;
  min-width: 140px;
  padding-top: 5px;
}

.fe-overview-filter__option {
  font-size: 12px;
  min-height: 39px;
  padding: 8px 13px;
}

.fe-overview-filter__option input {
  flex: 0 0 15px;
}

.fe-overview-filter__type-dot {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  flex: 0 0 6px;
  height: 6px;
  width: 6px;
}

.fe-overview-filter__type-dot--video {
  background: #a78bfa;
}

.fe-overview-filter__type-dot--music {
  background: #06b6d4;
}

.fe-overview-filter__type-dot--artwork {
  background: #f5c842;
}

.fe-overview-filter__type-dot--content {
  background: #34d399;
}

.fe-overview-filter__footer {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding: 7px 11px;
}

.fe-project-overview button.fe-overview-filter__clear,
.fe-project-overview button.fe-overview-filter__done {
  border: 0;
  cursor: pointer;
  font-size: 11px;
}

.fe-project-overview button.fe-overview-filter__clear {
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  padding: 4px 2px;
}

.fe-project-overview button.fe-overview-filter__done {
  float: none;
  margin: 0;
}

.fe-overview-table {
  overflow: hidden;
}

.fe-overview-table__header,
.fe-overview-group__row,
.fe-overview-asset-row {
  grid-template-columns: minmax(320px, 1fr) 160px 130px 130px 32px;
  padding: 0 20px;
}

.fe-overview-table__header {
  background: rgba(255, 255, 255, 0.025);
  height: 36px;
}

.fe-overview-group__row,
.fe-overview-asset-row {
  min-height: 59px;
}

.fe-overview-group__row[role="button"],
.fe-overview-asset-row[href] {
  cursor: pointer;
}

.fe-overview-group__row:hover,
.fe-overview-group__row.is-expanded,
.fe-overview-asset-row:hover {
  background: rgba(255, 255, 255, 0.045);
}

.fe-overview-group__copy,
.fe-overview-asset-row__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fe-overview-group__copy strong,
.fe-overview-asset-row__copy strong {
  color: rgba(255, 255, 255, 0.92);
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-overview-group__copy small,
.fe-overview-asset-row__copy > small {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  line-height: 1.25;
  margin-top: 2px;
}

.fe-overview-asset-row__title {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.fe-overview-asset-row__title strong {
  min-width: 0;
}

.fe-overview-asset-row__title small.fe-overview-asset-row__version {
  color: rgba(255, 255, 255, 0.3);
  flex: 0 0 auto;
  font-size: 11px;
  margin: 0;
}

.fe-overview-asset-row[data-type-key="video"] .fe-overview-asset-row__copy > small {
  color: #a78bfa;
}

.fe-overview-asset-row[data-type-key="music"] .fe-overview-asset-row__copy > small {
  color: #06b6d4;
}

.fe-overview-asset-row[data-type-key="artwork"] .fe-overview-asset-row__copy > small {
  color: #f5c842;
}

.fe-overview-asset-row[data-type-key="content"] .fe-overview-asset-row__copy > small {
  color: #34d399;
}

.fe-overview-stage {
  align-items: center;
  color: rgba(255, 255, 255, 0.45);
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
}

.fe-overview-stage i {
  background: currentColor;
  border-radius: 50%;
  flex: 0 0 5px;
  height: 5px;
  width: 5px;
}

.fe-overview-stage--rough-cut {
  color: #f5c842;
}

.fe-overview-stage--locked {
  color: #ff6b4a;
}

.fe-overview-stage--ba-review {
  color: #fb923c;
}

.fe-overview-stage--approved {
  color: #34d399;
}

.fe-overview-stage--qc-in-progress {
  color: #06b6d4;
}

.fe-overview-stage--delivered {
  color: #a78bfa;
}

.fe-overview-group__chevron svg,
.fe-overview-row-chevron svg {
  height: 14px;
  transition: color 150ms ease, transform 180ms ease;
  width: 14px;
}

.fe-overview-group__row:not([data-group-count="1"]) .fe-overview-group__chevron svg {
  transform: rotate(90deg);
}

.fe-overview-group__row.is-expanded .fe-overview-group__chevron {
  transform: none;
}

.fe-overview-group__row.is-expanded .fe-overview-group__chevron svg {
  transform: rotate(-90deg);
}

.fe-overview-group__nested:not([hidden]) {
  animation: fe-overview-nested-enter 180ms ease-out both;
}

.fe-overview-asset-row--nested {
  background: rgba(255, 255, 255, 0.02);
}

.fe-overview-asset-row--nested .fe-overview-asset-row__asset {
  padding-left: 32px;
}

.fe-overview-empty {
  min-height: 160px;
}

.fe-overview-activity {
  min-height: 260px;
  padding: 20px 28px;
}

.fe-overview-activity ol {
  gap: 12px;
  margin-top: 16px;
}

.fe-overview-activity__icon {
  font-size: inherit;
}

.fe-overview-activity__icon svg {
  height: 13px;
  width: 13px;
}

.fe-overview-activity__icon--violet {
  background: rgba(167, 139, 250, 0.1);
  color: #a78bfa;
}

.fe-overview-activity__icon--gold {
  background: rgba(245, 200, 66, 0.1);
  color: #f5c842;
}

.fe-overview-activity li strong {
  font-weight: 400;
}

@keyframes fe-overview-nested-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .fe-overview-content {
    padding-top: 34px;
    width: calc(100% - 48px);
  }

  .fe-overview-hero__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .fe-overview-stats {
    border: 0;
    margin-left: 0;
    min-height: 0;
  }

  .fe-overview-table__header,
  .fe-overview-group__row,
  .fe-overview-asset-row {
    grid-template-columns: minmax(240px, 1fr) 145px 115px 115px 28px;
  }
}

@media (max-width: 800px) {
  .fe-overview-content {
    padding-top: 24px;
    width: calc(100% - 40px);
  }

  .fe-overview-hero {
    padding-bottom: 24px;
  }

  .fe-overview-hero__top {
    gap: 18px;
  }

  .fe-overview-hero__identity h1 {
    font-size: 24px;
  }

  .fe-overview-stats {
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 3px;
    width: 100%;
  }

  .fe-overview-stat {
    flex: 0 0 auto;
  }

  .fe-overview-table__header {
    display: none;
  }

  .fe-overview-group__row,
  .fe-overview-asset-row {
    gap: 12px 20px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding: 14px 17px;
  }

  .fe-overview-group__asset,
  .fe-overview-asset-row__asset {
    grid-column: 1;
    grid-row: 1;
  }

  .fe-overview-group__stage {
    display: none;
  }

  .fe-overview-stage {
    grid-column: 1;
    grid-row: 2;
    padding-left: 44px;
  }

  .fe-overview-group__row .fe-overview-cell--updated,
  .fe-overview-asset-row .fe-overview-cell--updated {
    grid-column: 1;
    grid-row: 3;
    padding-left: 44px;
  }

  .fe-overview-group__row .fe-overview-cell--due,
  .fe-overview-asset-row .fe-overview-cell--due {
    display: flex;
    grid-column: 2;
    grid-row: 3;
  }

  .fe-overview-cell[data-label]::before {
    color: rgba(255, 255, 255, 0.25);
    content: attr(data-label) ": ";
    margin-right: 4px;
  }

  .fe-overview-group__chevron,
  .fe-overview-row-chevron {
    grid-column: 2;
    grid-row: 1;
  }

  .fe-overview-asset-row--nested .fe-overview-asset-row__asset,
  .fe-overview-asset-row--nested .fe-overview-stage,
  .fe-overview-asset-row--nested .fe-overview-cell--updated {
    padding-left: 20px;
  }
}

@media (max-width: 560px) {
  .fe-overview-subbar__inner {
    padding: 0 15px;
  }

  .fe-overview-content {
    padding-top: 20px;
    width: calc(100% - 30px);
  }

  .fe-overview-hero__top {
    align-items: flex-start;
  }

  .fe-project-overview button.fe-overview-request-button {
    font-size: 12px;
    height: auto;
    margin-left: 10px;
    min-height: 34px;
    padding: 7px 11px;
    width: auto;
  }

  .fe-project-overview button.fe-overview-request-button span {
    font-size: inherit;
  }

  .fe-overview-hero__meta {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fe-overview-hero__separator {
    display: none;
  }

  .fe-overview-team {
    margin-top: 10px;
    width: 100%;
  }

  .fe-overview-stats {
    display: grid;
    gap: 18px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fe-project-overview button.fe-overview-stat {
    border: 0;
    min-height: 0;
  }

  .fe-overview-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fe-overview-filter-clear {
    grid-column: 1 / -1;
  }

  .fe-overview-group__row,
  .fe-overview-asset-row {
    grid-template-columns: minmax(0, 1fr) 18px;
  }

  .fe-overview-group__row .fe-overview-cell--due,
  .fe-overview-asset-row .fe-overview-cell--due {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    padding-left: 44px;
  }

  .fe-overview-asset-row--nested .fe-overview-cell--due {
    padding-left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-overview-group__nested:not([hidden]) {
    animation: none;
  }
}

/* Video project detail --------------------------------------------------- */
.fe-video-detail {
  --fe-video-detail-bg: #1a1a1a;
  --fe-video-detail-card: var(--fe-detail-card-surface);
  --fe-video-detail-card-hover: var(--fe-detail-card-surface-hover);
  --fe-video-detail-border: rgba(255, 255, 255, 0.1);
  --fe-video-detail-border-faint: rgba(255, 255, 255, 0.06);
  --fe-video-detail-text: #fff;
  --fe-video-detail-muted: rgba(255, 255, 255, 0.6);
  --fe-video-detail-dim: rgba(255, 255, 255, 0.4);
  --fe-video-detail-faint: rgba(255, 255, 255, 0.25);
  --fe-video-detail-yellow: #f5c842;
  --fe-video-detail-orange: #ff6b4a;
  --fe-video-detail-purple: #a78bfa;
  --fe-video-detail-cyan: #06b6d4;
  --fe-video-detail-green: #34d399;
  color: var(--fe-video-detail-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0 auto;
  max-width: 1400px;
  min-height: calc(100vh - 160px);
  width: 100%;
}

.fe-video-detail *,
.fe-video-detail *::before,
.fe-video-detail *::after {
  box-sizing: border-box;
}

.fe-video-detail h1,
.fe-video-detail h2,
.fe-video-detail h3,
.fe-video-detail p,
.fe-video-detail dl,
.fe-video-detail dd,
.fe-video-detail ol {
  margin: 0;
}

.fe-video-detail button,
.fe-video-detail input {
  font: inherit;
}

.fe-video-detail [hidden] {
  display: none !important;
}

.fe-video-detail__icon,
.fe-video-detail__section-icon {
  height: 16px;
  width: 16px;
}

.fe-video-detail__header {
  animation: fe-video-detail-reveal 0.6s cubic-bezier(0.25, 0, 0, 1) both;
  margin-bottom: 32px;
}

.fe-video-detail__back-link {
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  display: inline-flex;
  font-size: 14px;
  gap: 8px;
  margin-bottom: 24px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.fe-video-detail__back-link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.fe-video-detail__header-row {
  align-items: flex-start;
  display: flex;
  gap: 32px;
  justify-content: space-between;
}

.fe-video-detail__header-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.fe-video-detail__eyebrow,
.fe-video-detail__section-label {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.fe-video-detail__eyebrow {
  margin-bottom: 12px !important;
}

.fe-video-detail__header h1 {
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.fe-video-detail__description {
  color: var(--fe-video-detail-muted);
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 24px !important;
}

.fe-video-detail__metadata {
  align-items: center;
  color: var(--fe-video-detail-dim);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 24px;
  margin-bottom: 24px;
}

.fe-video-detail__metadata span {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.fe-video-detail__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.fe-video-detail__stat {
  backdrop-filter: blur(20px);
  background: var(--fe-video-detail-card);
  border: 1px solid var(--fe-video-detail-border);
  border-radius: 12px;
  min-width: 112px;
  padding: 8px 16px;
}

.fe-video-detail__stat dt {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.fe-video-detail__stat dd {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.fe-video-detail__header-actions {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
}

.fe-video-detail__button {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.fe-video-detail__button--brand svg {
  height: 17px;
  margin-right: 7px;
  width: 17px;
}

.fe-video-detail__artist-upload {
  white-space: nowrap;
}

.fe-video-detail__button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.fe-video-detail__button--brand {
  background: linear-gradient(135deg, var(--fe-video-detail-yellow), var(--fe-video-detail-orange));
  border: 0;
  box-shadow: 0 6px 24px rgba(245, 200, 66, 0.24);
  color: #090909;
}

.fe-video-detail__button--ghost,
.fe-video-detail__button--icon {
  background: var(--fe-video-detail-card);
  border: 1px solid var(--fe-video-detail-border);
  color: rgba(255, 255, 255, 0.7);
}

.fe-video-detail__button--icon {
  padding: 12px;
  width: 48px;
}

.fe-video-detail__button--icon svg {
  height: 20px;
  width: 20px;
}

.fe-video-detail__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fe-video-detail__card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--fe-video-detail-card);
  border: 1px solid var(--fe-video-detail-border);
  border-radius: 16px;
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}

.fe-video-detail__card:hover {
  background: var(--fe-video-detail-card-hover);
  border-color: rgba(255, 255, 255, 0.14);
}

.fe-video-detail__reveal {
  animation: fe-video-detail-reveal 0.6s cubic-bezier(0.25, 0, 0, 1) both;
  animation-delay: calc(var(--fe-video-detail-order, 0) * 50ms);
}

.fe-video-detail__media-shell {
  align-items: flex-start;
  animation: fe-video-detail-reveal 0.6s 50ms cubic-bezier(0.25, 0, 0, 1) both;
  display: flex;
  gap: 16px;
  min-width: 0;
  position: relative;
}

.fe-video-detail__media-column {
  flex: 0 0 65%;
  min-width: 0;
  position: relative;
}

.fe-video-detail__player-card {
  padding: 20px;
  position: relative;
}

.fe-video-detail__player-heading {
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  font-size: 10px;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
  min-height: 30px;
  text-transform: uppercase;
}

.fe-video-detail__focus-trigger {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--fe-video-detail-border);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 6px;
  letter-spacing: 0;
  padding: 6px 12px;
  text-transform: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.fe-video-detail__focus-trigger:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
}

.fe-video-detail__focus-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.fe-video-detail__player-frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.fe-video-detail__player-frame .video-js,
.fe-video-detail__video {
  height: 100% !important;
  inset: 0;
  object-fit: cover;
  position: absolute !important;
  width: 100% !important;
}

.fe-video-detail__player-frame .vjs-control-bar,
.fe-video-detail__player-frame .vjs-big-play-button,
.fe-video-detail__player-frame .vjs-loading-spinner {
  display: none !important;
}

.fe-video-detail__annotation-canvas {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  touch-action: none;
  width: 100%;
  z-index: 5;
}

.fe-video-detail__center-play,
.fe-video-detail__primary-control,
.fe-video-detail__focus-play {
  align-items: center;
  background: var(--fe-video-detail-accent-gradient) !important;
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
}

.fe-video-detail__center-play {
  height: 64px;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: 64px;
  z-index: 12;
}

.fe-video-detail__center-play.is-hidden {
  opacity: 0;
}

.fe-video-detail__player-frame:hover .fe-video-detail__center-play.is-hidden,
.fe-video-detail__center-play:focus-visible {
  opacity: 1;
}

.fe-video-detail__center-play svg {
  height: 24px;
  width: 24px;
}

.fe-video-detail__scrubber-wrap {
  margin-top: 12px;
  position: relative;
}

.fe-video-detail__markers {
  height: 16px;
  inset: -4px 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.fe-video-detail__marker {
  appearance: none;
  background: transparent !important;
  border: 0;
  cursor: pointer;
  height: 20px;
  left: var(--fe-video-marker-position, 0%);
  padding: 0;
  pointer-events: auto;
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  width: 12px;
  z-index: 4;
}

.fe-video-detail__marker::before {
  background: var(--fe-video-detail-yellow) !important;
  border-radius: 2px;
  content: "";
  height: 12px;
  left: 50%;
  opacity: 0.8;
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  transition: height 0.15s ease, opacity 0.15s ease, top 0.15s ease;
  width: 2px;
}

.fe-video-detail__marker:hover::before,
.fe-video-detail__marker:focus-visible::before {
  height: 16px;
  opacity: 1;
  top: 2px;
}

.fe-video-detail__scrubber {
  --fe-video-progress: 0%;
  appearance: none;
  background: linear-gradient(90deg, var(--fe-video-detail-yellow) 0, var(--fe-video-detail-orange) var(--fe-video-progress), rgba(255, 255, 255, 0.1) var(--fe-video-progress));
  border-radius: 2px;
  cursor: pointer;
  display: block;
  height: 4px;
  margin: 0;
  outline: 0;
  width: 100%;
}

.fe-video-detail__scrubber::-webkit-slider-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.fe-video-detail__scrubber::-moz-range-thumb {
  background: #fff;
  border: 0;
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.fe-video-detail__timecodes {
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  justify-content: space-between;
  margin-top: 6px;
}

.fe-video-detail__transport {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
}

.fe-video-detail__ghost-control,
.fe-video-detail__focus-ghost {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--fe-video-detail-border);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  transition: background 0.2s ease;
  width: 36px;
}

.fe-video-detail__ghost-control:hover,
.fe-video-detail__focus-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

.fe-video-detail__ghost-control svg,
.fe-video-detail__primary-control svg,
.fe-video-detail__focus-ghost svg,
.fe-video-detail__focus-play svg {
  height: 16px;
  width: 16px;
}

.fe-video-detail__primary-control {
  height: 40px;
  width: 40px;
}

.fe-video-detail__versions {
  display: flex;
  gap: 8px;
  padding-top: 24px;
}

.fe-video-detail__version-pill {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.fe-video-detail__version-pill:hover {
  color: rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
}

.fe-video-detail__version-pill.is-active {
  background: linear-gradient(135deg, var(--fe-video-detail-yellow), var(--fe-video-detail-orange));
  color: #080808;
}

.fe-video-detail__player-status {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: rgba(0, 0, 0, 0.36);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.fe-video-detail__status-symbol {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--fe-video-detail-border);
  border-radius: 50%;
  display: flex;
  height: 56px;
  justify-content: center;
  margin-bottom: 16px;
  width: 56px;
}

.fe-video-detail__status-symbol svg {
  height: 24px;
  width: 24px;
}

.fe-video-detail__player-status--processing .fe-video-detail__status-symbol {
  color: var(--fe-video-detail-cyan);
}

.fe-video-detail__player-status--warning .fe-video-detail__status-symbol {
  color: var(--fe-video-detail-yellow);
}

.fe-video-detail__player-status--danger .fe-video-detail__status-symbol {
  color: var(--fe-video-detail-orange);
}

.fe-video-detail__player-status h2 {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.fe-video-detail__player-status p {
  color: var(--fe-video-detail-dim);
  font-size: 13px;
  line-height: 1.6;
  max-width: 520px;
}

.fe-video-detail__player-status code {
  color: rgba(255, 107, 74, 0.75);
  font-size: 10px;
  margin-top: 12px;
}

.fe-video-detail__upload-progress {
  margin-top: 12px;
}

.fe-video-detail__notes {
  align-self: flex-start;
  display: flex;
  flex: 0 0 calc(35% - 16px);
  flex-direction: column;
  height: 520px;
  overflow: hidden;
  padding: 20px;
}

.fe-video-detail__notes-heading {
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  flex: 0 0 auto;
  font-size: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fe-video-detail__notes-heading--focus {
  display: none;
}

.fe-video-detail__comments {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  scrollbar-width: thin;
}

.fe-video-detail__comments::-webkit-scrollbar {
  width: 4px;
}

.fe-video-detail__comments::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.fe-video-detail__comment {
  align-items: flex-start;
  border-radius: 12px;
  display: flex;
  gap: 10px;
  padding: 10px;
  transition: background 0.15s ease;
}

.fe-video-detail__comment:hover {
  background: rgba(255, 255, 255, 0.05);
}

.fe-video-detail__avatar {
  align-items: center;
  background: linear-gradient(135deg, rgba(245, 200, 66, 0.82), rgba(255, 107, 74, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #111;
  display: inline-flex;
  flex: 0 0 24px;
  font-size: 9px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
}

.fe-video-detail__comment-copy {
  min-width: 0;
}

.fe-video-detail__comment-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fe-video-detail__comment-meta strong {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 500;
}

.fe-video-detail__comment-meta > span {
  color: rgba(255, 255, 255, 0.28);
  font-size: 9px;
}

.fe-video-detail button.fe-video-detail__timecode-pill {
  background: rgba(167, 139, 250, 0.14);
  border: 0;
  border-radius: 999px;
  color: var(--fe-video-detail-purple);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px !important;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 15px !important;
  padding: 2px 8px;
}

.fe-video-detail button.fe-video-detail__timecode-pill:disabled {
  cursor: default;
  opacity: 0.45;
}

.fe-video-detail__comment-copy p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  line-height: 1.55;
  margin-top: 3px;
}

.fe-video-detail__compose {
  border-top: 1px solid transparent;
  flex: 0 0 auto;
  padding-top: 12px;
}

.fe-video-detail__compose label {
  color: rgba(255, 255, 255, 0.3);
  display: block;
  font-size: 10px;
  margin-bottom: 6px;
}

.fe-video-detail__compose-row {
  display: flex;
  gap: 8px;
}

.fe-video-detail__compose-row input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--fe-video-detail-border);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.6);
  flex: 1 1 auto;
  font-size: 13px;
  min-width: 0;
  padding: 10px 14px;
}

.fe-video-detail__compose-row input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.fe-video-detail__compose-row input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.fe-video-detail .fe-video-detail__compose-row > button[type="submit"] {
  align-items: center;
  background: var(--fe-video-detail-accent-gradient) !important;
  border: 0;
  border-radius: 12px;
  color: #fff !important;
  cursor: pointer;
  display: flex;
  justify-content: center;
  opacity: 1;
  width: 42px;
}

.fe-video-detail .fe-video-detail__compose-row > button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.fe-video-detail__comment-errors {
  color: var(--fe-video-detail-orange);
  font-size: 10px;
  line-height: 1.35;
}

.fe-video-detail__comment-errors:not(:empty) {
  margin-bottom: 6px;
}

.fe-video-detail .fe-video-detail__compose-row > button[type="submit"] svg {
  height: 16px;
  width: 16px;
}

.fe-video-detail__section {
  padding: 20px;
}

.fe-video-detail__section-heading {
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  transition: color 0.5s ease;
}

.fe-video-detail__card:hover .fe-video-detail__section-heading {
  color: var(--fe-video-detail-yellow);
}

.fe-video-detail__section-heading h2 {
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fe-video-detail__section-heading--split {
  justify-content: space-between;
}

.fe-video-detail__section-heading--split > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.fe-video-detail__section-heading--split > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
}

.fe-video-detail__pipeline-card .fe-video-detail__section-heading {
  margin-bottom: 24px;
}

.fe-video-detail__pipeline-scroll {
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  scrollbar-width: thin;
}

.fe-video-detail__pipeline {
  display: flex;
  min-width: 760px;
  padding: 0;
}

.fe-video-detail__pipeline-step {
  --fe-video-stage: rgba(255, 255, 255, 0.22);
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  list-style: none;
  min-width: 118px;
  position: relative;
  text-align: center;
}

.fe-video-detail__pipeline-step--yellow { --fe-video-stage: var(--fe-video-detail-yellow); }
.fe-video-detail__pipeline-step--orange { --fe-video-stage: var(--fe-video-detail-orange); }
.fe-video-detail__pipeline-step--purple { --fe-video-stage: var(--fe-video-detail-purple); }
.fe-video-detail__pipeline-step--cyan { --fe-video-stage: var(--fe-video-detail-cyan); }
.fe-video-detail__pipeline-step--green { --fe-video-stage: var(--fe-video-detail-green); }

.fe-video-detail__pipeline-line {
  background: rgba(255, 255, 255, 0.05);
  height: 2px;
  position: absolute;
  right: 50%;
  top: 30px;
  width: 100%;
  z-index: 0;
}

.fe-video-detail__pipeline-line.is-active {
  background: linear-gradient(90deg, var(--fe-video-detail-yellow), var(--fe-video-stage));
}

.fe-video-detail__pipeline-node {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--fe-video-detail-border);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.24);
  display: flex;
  font-size: 18px;
  font-weight: 700;
  height: 60px;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, transform 0.5s ease;
  width: 60px;
  z-index: 1;
}

.fe-video-detail__pipeline-step.is-complete .fe-video-detail__pipeline-node,
.fe-video-detail__pipeline-step.is-current .fe-video-detail__pipeline-node {
  background: color-mix(in srgb, var(--fe-video-stage) 22%, rgba(255, 255, 255, 0.05));
  border-color: var(--fe-video-stage);
  color: var(--fe-video-stage);
}

.fe-video-detail__pipeline-step.is-current .fe-video-detail__pipeline-node {
  box-shadow: 0 0 30px color-mix(in srgb, var(--fe-video-stage) 30%, transparent);
  transform: scale(1.04);
}

.fe-video-detail__pipeline-step strong {
  color: rgba(255, 255, 255, 0.34);
  font-size: 12px;
  font-weight: 600;
}

.fe-video-detail__pipeline-step.is-current strong {
  color: #fff;
}

.fe-video-detail__pipeline-step small {
  color: var(--fe-video-stage);
  font-size: 10px;
  font-weight: 500;
  margin-top: 4px;
}

.fe-video-detail__ba-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fe-video-detail__ba-row {
  align-items: center;
  background: rgba(255, 107, 74, 0.08);
  border: 1px solid rgba(255, 107, 74, 0.2);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  padding: 12px;
}

.fe-video-detail__ba-row.is-approved {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.2);
}

.fe-video-detail__ba-badge {
  background: rgba(255, 107, 74, 0.14);
  border: 0;
  border-radius: 999px;
  color: var(--fe-video-detail-orange);
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  padding: 3px 8px;
}

button.fe-video-detail__ba-badge {
  cursor: pointer;
}

.fe-video-detail__ba-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.fe-video-detail__ba-copy strong {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 500;
}

.fe-video-detail__ba-copy p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 2px;
}

.fe-video-detail__ba-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.fe-video-detail__ba-actions button,
.fe-video-detail__status-pill {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 999px;
  color: var(--fe-video-detail-green);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 14px;
}

.fe-video-detail__ba-actions button:last-child {
  background: rgba(255, 107, 74, 0.14);
  border-color: rgba(255, 107, 74, 0.24);
  color: var(--fe-video-detail-orange);
}

.fe-video-detail__ba-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.fe-video-detail__documents {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fe-video-detail__document {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
}

.fe-video-detail__document-state {
  color: rgba(255, 107, 74, 0.55);
  flex: 0 0 auto;
}

.fe-video-detail__document-state.is-complete {
  color: var(--fe-video-detail-green);
}

.fe-video-detail__document-state svg {
  height: 16px;
  width: 16px;
}

.fe-video-detail__document strong {
  color: rgba(255, 255, 255, 0.8);
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
}

.fe-video-detail__small-action,
.fe-video-detail__invite {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--fe-video-detail-border);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.58);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  text-decoration: none;
}

.fe-video-detail__small-action:hover:not(:disabled) {
  color: #fff;
}

button.fe-video-detail__small-action:disabled,
.fe-video-detail__invite:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.fe-video-detail__small-action--muted {
  opacity: 0.4;
}

.fe-video-detail__content-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fe-video-detail__file-list,
.fe-video-detail__activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fe-video-detail__file,
.fe-video-detail__activity {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 12px;
  transition: background 0.3s ease;
}

.fe-video-detail__file {
  color: inherit;
  display: block;
  text-decoration: none;
}

.fe-video-detail__card:hover .fe-video-detail__file,
.fe-video-detail__card:hover .fe-video-detail__activity {
  background: rgba(255, 255, 255, 0.05);
}

.fe-video-detail__file strong,
.fe-video-detail__activity strong {
  color: rgba(255, 255, 255, 0.58);
  display: block;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-video-detail__card:hover .fe-video-detail__file strong,
.fe-video-detail__card:hover .fe-video-detail__activity strong {
  color: rgba(255, 255, 255, 0.9);
}

.fe-video-detail__file > div {
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  font-size: 10px;
  gap: 12px;
  margin-top: 4px;
}

.fe-video-detail__file time {
  margin-left: auto;
}

.fe-video-detail__wide-action {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--fe-video-detail-border);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-top: 16px;
  padding: 10px;
  transition: background 0.3s ease, color 0.3s ease;
  width: 100%;
}

.fe-video-detail__wide-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.fe-video-detail__wide-action:disabled {
  cursor: default;
  opacity: 0.55;
}

.fe-video-detail__activity {
  display: flex;
  gap: 12px;
}

.fe-video-detail__activity-dot {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  flex: 0 0 8px;
  height: 8px;
  margin-top: 6px;
}

.fe-video-detail__activity--yellow .fe-video-detail__activity-dot { background: var(--fe-video-detail-yellow); }
.fe-video-detail__activity--orange .fe-video-detail__activity-dot { background: var(--fe-video-detail-orange); }
.fe-video-detail__activity--purple .fe-video-detail__activity-dot { background: var(--fe-video-detail-purple); }
.fe-video-detail__activity--cyan .fe-video-detail__activity-dot { background: var(--fe-video-detail-cyan); }
.fe-video-detail__activity--green .fe-video-detail__activity-dot { background: var(--fe-video-detail-green); }

.fe-video-detail__activity > div {
  min-width: 0;
}

.fe-video-detail__activity p {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-video-detail__activity small {
  color: rgba(255, 255, 255, 0.2);
  display: block;
  font-size: 9px;
  margin-top: 4px;
}

.fe-video-detail__team {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fe-video-detail__member {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  text-align: center;
  transition: background 0.3s ease;
}

.fe-video-detail__card:hover .fe-video-detail__member {
  background: rgba(255, 255, 255, 0.05);
}

.fe-video-detail__member-avatar {
  align-items: center;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.78), rgba(6, 182, 212, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  height: 48px;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
  width: 48px;
}

.fe-video-detail__member-avatar i {
  background: rgba(255, 255, 255, 0.28);
  border: 2px solid #111;
  border-radius: 50%;
  bottom: -1px;
  height: 12px;
  position: absolute;
  right: -1px;
  width: 12px;
}

.fe-video-detail__member strong {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-video-detail__member small {
  color: rgba(255, 255, 255, 0.28);
  font-size: 10px;
  margin-top: 2px;
}

.fe-video-detail__delivery.is-delivered {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.22);
}

.fe-video-detail__prerequisites {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.fe-video-detail__prerequisites span {
  background: rgba(255, 107, 74, 0.08);
  border: 1px solid rgba(255, 107, 74, 0.2);
  border-radius: 999px;
  color: var(--fe-video-detail-orange);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 16px;
}

.fe-video-detail__prerequisites span.is-done {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.22);
  color: var(--fe-video-detail-green);
}

.fe-video-detail__signoff {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.fe-video-detail__signoff svg {
  color: var(--fe-video-detail-green);
  height: 14px;
  width: 14px;
}

.fe-video-detail__signoff span,
.fe-video-detail__signoff button {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 999px;
  color: var(--fe-video-detail-green);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
}

.fe-video-detail__signoff .fe-video-detail__signoff-pending {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

.fe-video-detail__signoff button {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--fe-video-detail-border);
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
  font-family: var(--font-fe-ui);
  font-size: 13px;
  font-weight: 500;
  min-height: 36px;
  opacity: 1;
  padding: 8px 18px;
}

.fe-video-detail__delivery-trigger {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.22);
  cursor: not-allowed;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: 48px;
  justify-content: center;
  width: 100%;
}

.fe-video-detail__delivery-trigger.is-ready {
  background: linear-gradient(135deg, var(--fe-video-detail-yellow), var(--fe-video-detail-orange));
  border-color: transparent;
  color: #111;
  opacity: 0.65;
}

.fe-video-detail__delivery-trigger svg {
  height: 16px;
  width: 16px;
}

.fe-video-detail__destination {
  align-items: center;
  color: rgba(255, 255, 255, 0.25);
  display: flex;
  font-size: 10px;
  gap: 6px;
  justify-content: center;
  margin-top: 10px !important;
}

.fe-video-detail__destination svg {
  height: 12px;
  width: 12px;
}

.fe-video-detail__delivery-complete {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  text-align: center;
}

.fe-video-detail__delivery-icon {
  align-items: center;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.24);
  border-radius: 50%;
  color: var(--fe-video-detail-green);
  display: flex;
  height: 64px;
  justify-content: center;
  margin-bottom: 16px;
  width: 64px;
}

.fe-video-detail__delivery-icon svg {
  height: 28px;
  width: 28px;
}

.fe-video-detail__delivery-complete h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.fe-video-detail__delivery-complete p {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  margin-bottom: 16px;
}

.fe-video-detail__delivery-reference {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 999px;
  color: var(--fe-video-detail-green);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  margin-bottom: 8px;
  padding: 6px 16px;
}

.fe-video-detail__delivery-complete small {
  align-items: center;
  color: rgba(255, 255, 255, 0.32);
  display: flex;
  font-size: 10px;
  gap: 6px;
  margin-top: 5px;
}

.fe-video-detail__delivery-complete small svg {
  height: 12px;
  width: 12px;
}

.fe-video-detail__empty {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.32);
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: center;
  min-height: 84px;
  padding: 20px;
  text-align: center;
}

.fe-video-detail__empty--comments {
  background: transparent;
  border: 0;
  flex: 1 1 auto;
}

.fe-video-detail__empty--success {
  color: var(--fe-video-detail-green);
}

.fe-video-detail__empty svg {
  height: 16px;
  width: 16px;
}

.fe-video-detail :is(a, button, input):focus-visible {
  outline: 2px solid var(--fe-video-detail-yellow);
  outline-offset: 3px;
}

/* Focus Mode uses the same media element and comment rail. */
.fe-video-detail__focus-brand,
.fe-video-detail__focus-meta,
.fe-video-detail__focus-toolbar {
  display: none;
}

body.fe-video-detail-focus-open {
  overflow: hidden;
}

.fe-video-detail__media-shell.is-focus-mode {
  animation: fe-video-detail-focus-in 0.3s ease both;
  background: #000;
  display: flex;
  gap: 0;
  inset: 0;
  position: fixed;
  z-index: 9999;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__media-column {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  height: 100vh;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__player-section,
.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__player-card {
  height: 100%;
  width: 100%;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__player-card {
  background: #000;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__player-heading,
.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__scrubber-wrap,
.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__timecodes,
.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__transport,
.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__versions,
.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__upload-progress {
  display: none;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__player-frame {
  aspect-ratio: auto;
  border-radius: 0;
  height: 100%;
  inset: 0;
  position: absolute;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__video,
.fe-video-detail__media-shell.is-focus-mode .video-js,
.fe-video-detail__media-shell.is-focus-mode .video-js video {
  object-fit: cover !important;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__center-play {
  display: none;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__notes {
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.6);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  flex: 0 0 300px;
  height: 100vh;
  padding: 0;
  width: 300px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__notes-heading--default {
  display: none;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__notes-heading--focus {
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 16px 20px;
}

.fe-video-detail__notes-heading--focus strong {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-video-detail__asset-pill {
  background: rgba(167, 139, 250, 0.15);
  border-radius: 999px;
  color: var(--fe-video-detail-purple);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__comments {
  gap: 12px;
  padding: 16px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__comment {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: block;
  padding: 12px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__avatar,
.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__comment-meta > span {
  display: none;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__compose {
  border-top-color: rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
}

.fe-video-detail__focus-brand,
.fe-video-detail__focus-meta {
  pointer-events: none;
  position: absolute;
  top: 20px;
  z-index: 20;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-brand {
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  font-size: 12px;
  gap: 8px;
  left: 20px;
}

.fe-video-detail__focus-logo {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-video-detail-yellow), var(--fe-video-detail-orange));
  border-radius: 50%;
  color: #000;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-meta {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  right: 20px;
}

.fe-video-detail__focus-meta > span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.fe-video-detail__focus-meta small {
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  margin-top: 2px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-toolbar {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  bottom: 24px;
  display: flex;
  gap: 12px;
  left: 50%;
  padding: 10px 20px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 24;
}

.fe-video-detail__focus-play {
  height: 40px;
  width: 40px;
}

.fe-video-detail__focus-divider {
  background: rgba(255, 255, 255, 0.1);
  height: 20px;
  width: 1px;
}

@keyframes fe-video-detail-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fe-video-detail-focus-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 1100px) {
  .fe-video-detail__header-row {
    flex-direction: column;
  }

  .fe-video-detail__header-actions {
    flex-wrap: wrap;
  }

  .fe-video-detail__media-shell:not(.is-focus-mode) {
    flex-direction: column;
  }

  .fe-video-detail__media-shell:not(.is-focus-mode) .fe-video-detail__media-column,
  .fe-video-detail__media-shell:not(.is-focus-mode) .fe-video-detail__notes {
    flex-basis: auto;
    width: 100%;
  }

  .fe-video-detail__media-shell:not(.is-focus-mode) .fe-video-detail__notes {
    height: 420px;
  }

  .fe-video-detail__team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .fe-video-detail__header {
    margin-bottom: 24px;
  }

  .fe-video-detail__header h1 {
    font-size: 30px;
  }

  .fe-video-detail__description {
    font-size: 16px;
  }

  .fe-video-detail__metadata {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .fe-video-detail__stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .fe-video-detail__stat {
    min-width: 0;
  }

  .fe-video-detail__header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    width: 100%;
  }

  .fe-video-detail__header-actions.has-artist-upload {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .fe-video-detail__artist-upload {
    font-size: 12px;
    min-width: 0;
  }

  .fe-video-detail__button {
    padding-left: 14px;
    padding-right: 14px;
  }

  .fe-video-detail__player-card,
  .fe-video-detail__notes,
  .fe-video-detail__section {
    padding: 16px;
  }

  .fe-video-detail__notes {
    height: 380px !important;
  }

  .fe-video-detail__section-heading--split {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .fe-video-detail__section-heading--split > span {
    text-align: left;
  }

  .fe-video-detail__documents,
  .fe-video-detail__content-grid {
    grid-template-columns: 1fr;
  }

  .fe-video-detail__ba-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fe-video-detail__ba-copy {
    flex-basis: calc(100% - 96px);
  }

  .fe-video-detail__ba-actions {
    justify-content: flex-end;
    margin-left: auto;
    width: 100%;
  }

  .fe-video-detail__team {
    grid-template-columns: 1fr;
  }

  .fe-video-detail__media-shell.is-focus-mode {
    flex-direction: column;
  }

  .fe-video-detail__media-shell.is-focus-mode .fe-video-detail__media-column {
    flex: 0 0 62vh;
    height: 62vh;
    width: 100%;
  }

  .fe-video-detail__media-shell.is-focus-mode .fe-video-detail__notes {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex: 1 1 auto;
    height: 38vh !important;
    width: 100%;
  }

  .fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-meta {
    max-width: 42vw;
  }

  .fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-toolbar {
    bottom: 12px;
  }

  .fe-video-detail__media-shell.is-focus-mode .fe-video-detail__compose {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-video-detail *,
  .fe-video-detail *::before,
  .fe-video-detail *::after,
  .fe-video-detail__media-shell.is-focus-mode {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Video asset detail — screenshot-backed review and delivery surface. */
.fe-video-detail-main {
  max-width: none !important;
  padding: 0 !important;
  width: 100%;
}

.fe-video-detail {
  --fe-video-detail-accent: #a78bfa;
  --fe-video-detail-accent-gradient: linear-gradient(135deg, #a78bfa 0%, rgba(167, 139, 250, 0.7) 100%);
  font-family: var(--font-fe-ui);
  isolation: isolate;
  margin: 0;
  max-width: none;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 72px;
  position: relative;
}

.fe-video-detail__ambient {
  inset: 72px 0 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.fe-video-detail__ambient-glow {
  animation: fe-video-detail-glow 10s ease-in-out infinite;
  border-radius: 50%;
  filter: blur(12px);
  height: 500px;
  opacity: 0.8;
  position: absolute;
  width: 500px;
}

.fe-video-detail__ambient-glow--purple {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.1), transparent 70%);
  left: 10%;
  top: 6%;
}

.fe-video-detail__ambient-glow--orange {
  animation-delay: -4s;
  background: radial-gradient(circle, rgba(255, 107, 74, 0.08), transparent 70%);
  right: -3%;
  top: -9%;
}

.fe-video-detail__ambient-glow--gold {
  animation-delay: -7s;
  background: radial-gradient(circle, rgba(245, 200, 66, 0.05), transparent 70%);
  bottom: 4%;
  left: 34%;
}

.fe-video-detail__breadcrumb-bar {
  align-items: center;
  background: rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  height: 72px;
  position: relative;
  z-index: 1;
}

.fe-video-detail__breadcrumb-inner {
  align-items: center;
  display: flex;
  gap: 16px;
  padding: 0 32px;
  width: 100%;
}

.fe-video-detail__back {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.58);
  display: inline-flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.fe-video-detail__back:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  transform: translateX(-1px);
}

.fe-video-detail__back svg,
.fe-video-detail__breadcrumbs svg {
  flex: 0 0 16px;
  height: 16px;
  width: 16px;
}

.fe-video-detail__breadcrumbs {
  align-items: center;
  color: rgba(255, 255, 255, 0.36);
  display: flex;
  font-size: 13px;
  gap: 7px;
  min-width: 0;
}

.fe-video-detail__breadcrumbs a,
.fe-video-detail__breadcrumbs span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-video-detail__breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.fe-video-detail__breadcrumbs a:hover {
  color: rgba(255, 255, 255, 0.72);
}

.fe-video-detail__breadcrumbs span {
  color: #fff;
  font-weight: 600;
}

.fe-video-detail__content {
  gap: 20px;
  margin: 0 auto;
  max-width: 1400px;
  padding: 48px 0 64px;
  position: relative;
  width: calc(100% - 64px);
  z-index: 1;
}

.fe-video-detail__card {
  background: var(--fe-video-detail-card);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  transform: none;
}

.fe-video-detail__card:hover {
  background: var(--fe-video-detail-card);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  transform: none;
}

.fe-video-detail__media-column {
  display: flex;
  flex: 0 0 65%;
  flex-direction: column;
  gap: 12px;
}

.fe-video-detail__player-card {
  padding: 20px;
}

.fe-video-detail__focus-trigger {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  padding: 5px 10px;
}

.fe-video-detail__focus-trigger:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.fe-video-detail__center-play,
.fe-video-detail__primary-control,
.fe-video-detail__focus-play {
  background: var(--fe-video-detail-accent-gradient) !important;
  color: #fff !important;
}

.fe-video-detail__scrubber {
  background: linear-gradient(90deg, var(--fe-video-detail-accent) 0, rgba(167, 139, 250, 0.7) var(--fe-video-progress), rgba(255, 255, 255, 0.1) var(--fe-video-progress));
}

.fe-video-detail__version-pill.is-active {
  background: var(--fe-video-detail-accent-gradient);
  color: #fff;
}

.fe-video-detail__versions {
  padding-top: 4px;
}

.fe-video-detail__notes {
  flex: 0 0 calc(35% - 16px);
  height: 520px;
}

.fe-video-detail__notes-heading {
  justify-content: flex-start;
}

.fe-video-detail__comment {
  gap: 10px;
}

.fe-video-detail__comment-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fe-video-detail__comment-copy > strong {
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 500;
}

.fe-video-detail__comment-copy p {
  margin-top: 0;
}

.fe-video-detail button.fe-video-detail__timecode-pill {
  flex: 0 0 auto;
}

.fe-video-detail__compose {
  border-top: 0;
}

.fe-video-detail__section {
  padding: 20px;
}

.fe-video-detail__section-heading {
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}

.fe-video-detail__card:hover .fe-video-detail__section-heading {
  color: rgba(255, 255, 255, 0.4);
}

.fe-video-detail__section-heading h2 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.fe-video-detail__section-heading--split > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}

.fe-video-detail__review-panel {
  background: rgba(255, 255, 255, 0.03);
  padding: 20px 24px;
}

.fe-video-detail__review-panel.is-approved {
  background: rgba(52, 211, 153, 0.025);
  border-color: rgba(52, 211, 153, 0.18);
}

.fe-video-detail__review-panel.is-changes_requested {
  background: rgba(245, 200, 66, 0.025);
  border-color: rgba(245, 200, 66, 0.18);
}

.fe-video-detail__review-panel.is-rejected {
  background: rgba(239, 68, 68, 0.025);
  border-color: rgba(239, 68, 68, 0.18);
}

.fe-video-detail__review-header {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fe-video-detail__review-header h2 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  margin: 0;
}

.fe-video-detail .fe-video-detail__review-header > span {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-fe-ui) !important;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 16px !important;
  text-align: right;
}

.fe-video-detail__review-summary {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  min-height: 50px;
  padding: 12px 16px;
}

.fe-video-detail__review-version,
.fe-video-detail__review-status {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 16px;
  padding: 3px 10px;
}

.fe-video-detail__review-version {
  background: rgba(245, 200, 66, 0.12);
  border: 1px solid rgba(245, 200, 66, 0.2);
  color: var(--fe-video-detail-yellow);
  font-weight: 600;
}

.fe-video-detail__review-status {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
}

.fe-video-detail__review-file {
  color: rgba(255, 255, 255, 0.4);
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 16px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-video-detail button.fe-video-detail__assign-reviewers {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--font-fe-ui) !important;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 16px !important;
  padding: 5px 0;
  transition: color 160ms ease;
}

.fe-video-detail button.fe-video-detail__assign-reviewers:hover {
  color: rgba(255, 255, 255, 0.7);
}

.fe-video-detail__decision-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fe-video-detail__decision-form {
  display: block;
  margin: 0;
}

.fe-video-detail button.fe-video-detail__decision {
  border: 1px solid;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-fe-ui) !important;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 600 !important;
  height: 44px;
  line-height: 20px !important;
  transition: background 200ms ease, border-color 200ms ease;
  width: 100%;
}

.fe-video-detail button.fe-video-detail__decision--approve {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.25);
  color: var(--fe-video-detail-green);
}

.fe-video-detail button.fe-video-detail__decision--approve:hover {
  background: rgba(52, 211, 153, 0.2);
  border-color: rgba(52, 211, 153, 0.4);
}

.fe-video-detail button.fe-video-detail__decision--changes {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.25);
  color: var(--fe-video-detail-yellow);
}

.fe-video-detail button.fe-video-detail__decision--changes:hover,
.fe-video-detail button.fe-video-detail__decision--changes[aria-expanded="true"] {
  background: rgba(245, 200, 66, 0.2);
  border-color: rgba(245, 200, 66, 0.4);
}

.fe-video-detail button.fe-video-detail__decision--reject {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

.fe-video-detail button.fe-video-detail__decision--reject:hover,
.fe-video-detail button.fe-video-detail__decision--reject[aria-expanded="true"] {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}

.fe-video-detail__feedback-panel {
  overflow: hidden;
  padding-top: 16px;
}

.fe-video-detail__feedback-panel form {
  display: grid;
  gap: 10px;
}

.fe-video-detail__feedback-panel textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-fe-ui);
  font-size: 14px;
  height: 80px;
  line-height: 1.5;
  min-height: 80px;
  padding: 12px 16px;
  resize: none;
  width: 100%;
}

.fe-video-detail__feedback-panel textarea::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.fe-video-detail__feedback-panel--changes textarea:focus {
  border-color: var(--fe-video-detail-yellow);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.1);
  outline: 0;
}

.fe-video-detail__feedback-panel--reject textarea:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  outline: 0;
}

.fe-video-detail .fe-video-detail__feedback-panel textarea:focus-visible {
  outline: 0;
  outline-offset: 0;
}

.fe-video-detail__feedback-panel form > div {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.fe-video-detail__feedback-panel button,
.fe-video-detail__feedback-panel input[type="submit"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-family: var(--font-fe-ui);
  font-size: 13px;
  min-height: 36px;
  padding: 7px 16px;
}

.fe-video-detail__feedback-panel--changes input[type="submit"] {
  background: rgba(245, 200, 66, 0.14);
  border-color: rgba(245, 200, 66, 0.3);
  color: var(--fe-video-detail-yellow);
  font-weight: 600;
  padding-inline: 20px;
}

.fe-video-detail__feedback-panel--reject input[type="submit"] {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-weight: 600;
  padding-inline: 20px;
}

.fe-video-detail__decision-state {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.fe-video-detail__decision-state > span {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.52);
  display: flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
}

.fe-video-detail__decision-state > span svg {
  height: 18px;
  width: 18px;
}

.fe-video-detail__decision-state > div {
  flex: 1 1 auto;
  min-width: 0;
}

.fe-video-detail__decision-state strong {
  color: rgba(255, 255, 255, 0.82);
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.fe-video-detail__decision-state p,
.fe-video-detail__decision-state small {
  color: rgba(255, 255, 255, 0.45);
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}

.fe-video-detail__decision-state small {
  color: rgba(255, 255, 255, 0.35);
  margin-top: 12px;
}

.fe-video-detail__decision-state--approved > span,
.fe-video-detail__decision-state--approved strong {
  color: var(--fe-video-detail-green);
}

.fe-video-detail__decision-state--approved > span {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.2);
}

.fe-video-detail__decision-state--changes > span,
.fe-video-detail__decision-state--changes strong {
  color: var(--fe-video-detail-yellow);
}

.fe-video-detail__decision-state--changes > span {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.2);
}

.fe-video-detail__decision-state--rejected > span,
.fe-video-detail__decision-state--rejected strong {
  color: #ef4444;
}

.fe-video-detail__decision-state--rejected > span {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.2);
}

.fe-video-detail__override-backdrop {
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.84);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 10030;
}

.fe-video-detail__override-modal {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
  color: #fff;
  max-width: 460px;
  padding: 32px;
  width: 100%;
}

.fe-video-detail__override-icon {
  align-items: center;
  background: rgba(245, 200, 66, 0.12);
  border: 1px solid rgba(245, 200, 66, 0.24);
  border-radius: 50%;
  color: var(--fe-video-detail-yellow);
  display: flex;
  font-size: 18px;
  font-weight: 700;
  height: 48px;
  justify-content: center;
  margin: 0 auto 16px;
  width: 48px;
}

.fe-video-detail__override-modal h2 {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.fe-video-detail__override-modal > p {
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
  line-height: 1.55;
  margin: 8px auto 20px;
  max-width: 360px;
  text-align: center;
}

.fe-video-detail__override-summary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.fe-video-detail__override-summary div {
  padding: 12px 16px;
}

.fe-video-detail__override-summary div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.fe-video-detail__override-summary dt,
.fe-video-detail__override-reviewers strong {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 500;
}

.fe-video-detail__override-summary dd {
  color: var(--fe-video-detail-yellow);
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}

.fe-video-detail__override-reviewers {
  margin-bottom: 20px;
}

.fe-video-detail__override-reviewers ul {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 6px;
  padding-left: 18px;
}

.fe-video-detail__override-modal footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.fe-video-detail__override-form {
  margin: 0;
}

.fe-video-detail__override-cancel,
.fe-video-detail button.fe-video-detail__override-confirm {
  border-radius: 999px;
  font-family: var(--font-fe-ui);
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  padding: 9px 18px;
}

.fe-video-detail__override-cancel {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  text-decoration: none;
}

.fe-video-detail button.fe-video-detail__override-confirm {
  background: rgba(245, 200, 66, 0.15);
  border: 1px solid rgba(245, 200, 66, 0.3);
  color: var(--fe-video-detail-yellow);
  cursor: pointer;
}

.fe-video-detail__qc-list,
.fe-video-detail__qc-item {
  display: flex;
  flex-direction: column;
}

.fe-video-detail__qc-list {
  gap: 10px;
}

.fe-video-detail__qc-item {
  gap: 6px;
}

.fe-video-detail__qc-row {
  align-items: center;
  border: 1px solid;
  border-radius: 12px;
  display: flex;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
}

.fe-video-detail__qc-row > svg {
  flex: 0 0 16px;
  height: 16px;
  width: 16px;
}

.fe-video-detail__qc-row strong {
  color: rgba(255, 255, 255, 0.7);
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 500;
}

.fe-video-detail__qc-value {
  color: #fff;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-video-detail__qc-badge {
  border: 1px solid;
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  min-width: 48px;
  padding: 5px 11px;
  text-align: center;
}

.fe-video-detail__qc-row--pass {
  background: rgba(52, 211, 153, 0.05);
  border-color: rgba(52, 211, 153, 0.1);
}

.fe-video-detail__qc-row--pass > svg,
.fe-video-detail__qc-row--pass .fe-video-detail__qc-badge {
  color: var(--fe-video-detail-green);
}

.fe-video-detail__qc-row--pass .fe-video-detail__qc-badge {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.2);
}

.fe-video-detail__qc-row--fail {
  background: rgba(255, 107, 74, 0.05);
  border-color: rgba(255, 107, 74, 0.12);
}

.fe-video-detail__qc-row--fail > svg,
.fe-video-detail__qc-row--fail .fe-video-detail__qc-badge {
  color: var(--fe-video-detail-orange);
}

.fe-video-detail__qc-row--fail .fe-video-detail__qc-badge {
  background: rgba(255, 107, 74, 0.15);
  border-color: rgba(255, 107, 74, 0.22);
}

.fe-video-detail__qc-row--warn {
  background: rgba(245, 200, 66, 0.05);
  border-color: rgba(245, 200, 66, 0.12);
}

.fe-video-detail__qc-row--warn > svg,
.fe-video-detail__qc-row--warn .fe-video-detail__qc-badge {
  color: var(--fe-video-detail-yellow);
}

.fe-video-detail__qc-row--warn .fe-video-detail__qc-badge {
  background: rgba(245, 200, 66, 0.14);
  border-color: rgba(245, 200, 66, 0.2);
}

.fe-video-detail__qc-note {
  border: 1px solid;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  line-height: 1.5;
  padding: 10px 16px;
}

.fe-video-detail__qc-note--fail {
  background: rgba(255, 107, 74, 0.06);
  border-color: rgba(255, 107, 74, 0.1);
}

.fe-video-detail__qc-note--warn {
  background: rgba(245, 200, 66, 0.05);
  border-color: rgba(245, 200, 66, 0.1);
}

.fe-video-detail__empty--qc {
  min-height: 112px;
}

.fe-video-detail__pipeline-card {
  padding: 20px 28px 24px;
}

.fe-video-detail__pipeline-label {
  margin-bottom: 16px;
}

.fe-video-detail__pipeline-scroll {
  padding: 0;
}

.fe-video-detail__pipeline {
  min-width: 720px;
}

.fe-video-detail__pipeline-step {
  min-width: 108px;
}

.fe-video-detail__pipeline-line {
  top: 17px;
}

.fe-video-detail__pipeline-node {
  font-size: 14px;
  height: 36px;
  margin-bottom: 6px;
  width: 36px;
}

.fe-video-detail__pipeline-step.is-complete .fe-video-detail__pipeline-node {
  background: linear-gradient(135deg, var(--fe-video-detail-yellow), var(--fe-video-detail-orange));
  border-color: transparent;
  color: #fff;
}

.fe-video-detail__pipeline-step.is-current .fe-video-detail__pipeline-node {
  background: rgba(245, 200, 66, 0.15);
  border-color: var(--fe-video-detail-yellow);
  box-shadow: none;
  color: var(--fe-video-detail-yellow);
  transform: none;
}

.fe-video-detail__pipeline-line.is-active {
  background: linear-gradient(90deg, var(--fe-video-detail-yellow), var(--fe-video-detail-orange));
}

.fe-video-detail__pipeline-step strong,
.fe-video-detail__pipeline-step.is-current strong {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
  max-width: 64px;
}

.fe-video-detail__ba-row,
.fe-video-detail__document {
  min-height: 52px;
}

.fe-video-detail__small-action--upload {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.24);
  color: var(--fe-video-detail-yellow);
}

.fe-video-detail__delivery-trigger.is-ready {
  background: linear-gradient(135deg, var(--fe-video-detail-yellow), var(--fe-video-detail-orange));
}

.fe-video-detail :is(a, button, input):focus-visible {
  outline-color: var(--fe-video-detail-accent);
}

@keyframes fe-video-detail-glow {
  0%, 100% { opacity: 0.66; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.14); }
}

@media (max-width: 1100px) {
  .fe-video-detail__content {
    padding-top: 32px;
  }

  .fe-video-detail__review-header,
  .fe-video-detail__review-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fe-video-detail .fe-video-detail__review-header > span {
    text-align: left;
  }

  .fe-video-detail__review-file {
    flex-basis: 45%;
  }
}

@media (max-width: 767px) {
  .fe-video-detail__breadcrumb-inner {
    gap: 12px;
    padding: 0 16px;
  }

  .fe-video-detail__breadcrumbs {
    font-size: 12px;
  }

  .fe-video-detail__breadcrumbs a:first-of-type,
  .fe-video-detail__breadcrumbs svg:first-of-type {
    display: none;
  }

  .fe-video-detail__content {
    padding: 24px 0 40px;
    width: calc(100% - 32px);
  }

  .fe-video-detail__review-panel {
    padding: 18px;
  }

  .fe-video-detail__review-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .fe-video-detail__review-file {
    flex: 1 0 100%;
    white-space: normal;
  }

  .fe-video-detail__decision-grid {
    grid-template-columns: 1fr;
  }

  .fe-video-detail__decision-state {
    flex-wrap: wrap;
  }

  .fe-video-detail__qc-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fe-video-detail__qc-row strong {
    flex-basis: calc(100% - 28px);
  }

  .fe-video-detail__qc-value {
    margin-left: 28px;
    max-width: calc(100% - 96px);
  }

  .fe-video-detail__pipeline-card {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-video-detail__ambient-glow {
    animation: none;
  }
}

/* Video Focus Mode — full-viewport review surface from the supplied Figma. */
body.fe-video-detail-focus-open {
  overscroll-behavior: none;
  overflow: hidden;
}

body.fe-video-detail-focus-open [data-nav-shell],
body.fe-video-detail-focus-open .fe-video-detail__breadcrumb-bar {
  display: none !important;
}

body.fe-video-detail-focus-open [data-page-transition-shell],
body.fe-video-detail-focus-open [data-page-transition-root],
body.fe-video-detail-focus-open [data-page-transition-scope],
body.fe-video-detail-focus-open [data-page-transition-item] {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}

body.fe-video-detail-focus-open .fe-video-detail-main,
body.fe-video-detail-focus-open .fe-video-detail {
  isolation: auto;
  overflow: visible !important;
}

.fe-video-detail__media-shell.is-focus-mode {
  align-items: stretch;
  animation: fe-video-detail-focus-in 0.24s ease both;
  background: #000;
  display: grid !important;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 315px;
  height: 100dvh;
  inset: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  position: fixed !important;
  width: 100vw;
  z-index: 9999;
}

.fe-video-detail__media-shell.is-focus-mode:focus {
  outline: none;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__media-column {
  align-items: stretch;
  display: flex;
  flex: initial;
  height: 100dvh;
  justify-content: stretch;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  width: auto;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__player-section,
.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__player-card {
  height: 100%;
  min-height: 0;
  width: 100%;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__player-card {
  backdrop-filter: none;
  background: #000;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__player-frame {
  aspect-ratio: auto;
  background: #000;
  border-radius: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__video,
.fe-video-detail__media-shell.is-focus-mode .video-js,
.fe-video-detail__media-shell.is-focus-mode .video-js video {
  height: 100% !important;
  object-fit: contain !important;
  width: 100% !important;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__notes {
  align-self: stretch;
  backdrop-filter: blur(12px);
  background: rgba(5, 5, 5, 0.96);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  display: flex;
  flex: initial;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  width: 315px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__notes-heading--focus {
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  margin: 0;
  min-height: 76px;
  padding: 16px 20px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__notes-heading--focus strong {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__asset-pill {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  font-size: 10px;
  line-height: 16px;
  padding: 1px 8px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__comments {
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
  padding: 16px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__comment {
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 12px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__comment:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.11);
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__comment-copy {
  display: contents;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__comment-copy > strong {
  align-self: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  grid-column: 2;
  line-height: 18px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__comment-copy p {
  color: rgba(255, 255, 255, 0.54);
  font-size: 11px;
  grid-column: 1 / -1;
  grid-row: 2;
  line-height: 1.6;
  margin: 0;
}

.fe-video-detail__media-shell.is-focus-mode button.fe-video-detail__timecode-pill {
  align-self: center;
  background: rgba(245, 200, 66, 0.14);
  color: #f5c842;
  padding: 1px 7px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__empty--comments {
  color: rgba(255, 255, 255, 0.3);
  min-height: 0;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__compose {
  background: rgba(5, 5, 5, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
  margin-top: auto;
  padding: 14px 16px 13px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__compose label {
  color: rgba(255, 255, 255, 0.28);
  font-size: 9px;
  line-height: 13px;
  margin-bottom: 6px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__compose-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  gap: 4px;
  height: 38px;
  padding: 3px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__compose-row input {
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  height: 30px;
  opacity: 0.7;
  padding: 0 9px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__compose-row > button[type="submit"] {
  background: var(--fe-video-detail-accent-gradient) !important;
  border-radius: 50%;
  color: #fff !important;
  flex: 0 0 30px;
  height: 30px;
  opacity: 1;
  width: 30px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__compose-row > button[type="submit"]:disabled {
  opacity: 0.45;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-brand {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  gap: 8px;
  left: 15px;
  top: 20px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-logo {
  font-size: 10px;
  font-weight: 800;
  height: 28px;
  line-height: 1;
  width: 28px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-meta {
  right: 20px;
  top: 20px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-meta > span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  line-height: 18px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-meta small {
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
  line-height: 15px;
  margin-top: 0;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-toolbar {
  backdrop-filter: blur(16px);
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  bottom: 24px;
  gap: 12px;
  left: 50%;
  padding: 10px 20px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-ghost {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  height: 36px;
  width: 36px;
}

.fe-video-detail__media-shell.is-focus-mode .fe-video-detail__focus-play {
  background: var(--fe-video-detail-accent-gradient) !important;
  color: #fff !important;
  height: 40px;
  width: 40px;
}

@media (max-width: 767px) {
  .fe-video-detail__media-shell.is-focus-mode {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 62dvh) minmax(0, 38dvh);
  }

  .fe-video-detail__media-shell.is-focus-mode .fe-video-detail__media-column {
    height: 62dvh;
    width: 100%;
  }

  .fe-video-detail__media-shell.is-focus-mode .fe-video-detail__notes {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    height: 38dvh !important;
    width: 100%;
  }
}

/* Artwork asset detail — supplied 1400px dark review surface. */
.fe-artwork-detail-main {
  max-width: none !important;
  padding: 0 !important;
}

.fe-artwork-detail {
  --fe-artwork-bg: #1a1a1a;
  --fe-artwork-card: var(--fe-detail-card-surface);
  --fe-artwork-card-hover: var(--fe-detail-card-surface-hover);
  --fe-artwork-border: rgba(255, 255, 255, 0.1);
  --fe-artwork-text: #fff;
  --fe-artwork-muted: rgba(255, 255, 255, 0.5);
  --fe-artwork-dim: rgba(255, 255, 255, 0.32);
  --fe-artwork-yellow: #f5c842;
  --fe-artwork-orange: #ff6b4a;
  --fe-artwork-purple: #a78bfa;
  --fe-artwork-green: #34d399;
  color: var(--fe-artwork-text);
  min-height: 100vh;
  padding-top: 72px;
  position: relative;
}

.fe-artwork-detail *,
.fe-artwork-detail *::before,
.fe-artwork-detail *::after {
  box-sizing: border-box;
}

.fe-artwork-detail h2,
.fe-artwork-detail h3,
.fe-artwork-detail p,
.fe-artwork-detail ol,
.fe-artwork-detail ul {
  margin: 0;
}

.fe-artwork-detail button,
.fe-artwork-detail input,
.fe-artwork-detail textarea,
.fe-artwork-detail summary {
  font: inherit;
}

.fe-artwork-detail [hidden] {
  display: none !important;
}

.fe-artwork-detail__breadcrumb-bar {
  align-items: center;
  background: rgba(0, 0, 0, 0.36);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  height: 72px;
}

.fe-artwork-detail__breadcrumb-inner {
  align-items: center;
  display: flex;
  gap: 16px;
  padding: 0 32px;
  width: 100%;
}

.fe-artwork-detail__back {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.58);
  display: inline-flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.fe-artwork-detail__back:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  transform: translateX(-1px);
}

.fe-artwork-detail__back svg,
.fe-artwork-detail__breadcrumbs svg {
  height: 16px;
  width: 16px;
}

.fe-artwork-detail__breadcrumbs {
  align-items: center;
  color: rgba(255, 255, 255, 0.36);
  display: flex;
  flex: 1 1 auto;
  font-size: 13px;
  gap: 7px;
  list-style: none;
  min-width: 0;
  padding: 0;
}

.fe-artwork-detail__breadcrumb-upload {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-artwork-yellow), var(--fe-artwork-orange));
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(245, 200, 66, 0.2);
  color: #090909;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 650;
  gap: 7px;
  min-height: 38px;
  padding: 8px 16px;
  text-decoration: none;
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.fe-artwork-detail__breadcrumb-upload:hover {
  box-shadow: 0 8px 28px rgba(245, 200, 66, 0.28);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.fe-artwork-detail__breadcrumb-upload svg {
  height: 15px;
  width: 15px;
}

.fe-artwork-detail__breadcrumbs li {
  min-width: 0;
}

.fe-artwork-detail__breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.fe-artwork-detail__breadcrumbs a:hover {
  color: rgba(255, 255, 255, 0.72);
}

.fe-artwork-detail__breadcrumbs li[aria-current="page"] {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-artwork-detail__breadcrumbs li[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.2);
  flex: 0 0 auto;
}

.fe-artwork-detail__workspace {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  max-width: 1400px;
  padding: 48px 0 56px;
  width: calc(100% - 48px);
}

.fe-artwork-detail__card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--fe-artwork-card);
  border: 1px solid var(--fe-artwork-border);
  border-radius: 16px;
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.fe-artwork-detail__card:hover {
  background: var(--fe-artwork-card-hover);
  border-color: rgba(255, 255, 255, 0.14);
}

.fe-artwork-detail__error {
  align-items: flex-start;
  background: rgba(255, 107, 74, 0.08);
  border: 1px solid rgba(255, 107, 74, 0.25);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.68);
  display: flex;
  font-size: 12px;
  gap: 12px;
  padding: 16px 20px;
}

.fe-artwork-detail__error > svg {
  color: var(--fe-artwork-orange);
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.fe-artwork-detail__error strong {
  color: #fff;
}

.fe-artwork-detail__error ul {
  margin-top: 5px;
  padding-left: 18px;
}

.fe-artwork-detail__media-shell {
  align-items: flex-start;
  animation: fe-artwork-detail-reveal 0.6s 50ms cubic-bezier(0.25, 0, 0, 1) both;
  display: flex;
  gap: 16px;
  min-width: 0;
  position: relative;
}

.fe-artwork-detail__media-column {
  flex: 0 0 65%;
  min-width: 0;
  position: relative;
}

.fe-artwork-detail__viewer-card {
  padding: 20px;
}

.fe-artwork-detail__viewer-heading {
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  font-size: 10px;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.14em;
  margin-bottom: 15px;
  min-height: 30px;
  text-transform: uppercase;
}

.fe-artwork-detail__viewer-heading > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-artwork-detail__viewer-tools,
.fe-artwork-detail__zoom {
  align-items: center;
  display: flex;
}

.fe-artwork-detail__viewer-tools {
  flex: 0 0 auto;
  gap: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.fe-artwork-detail__focus-trigger {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 6px;
  padding: 6px 10px;
  transition: background 0.2s ease, color 0.2s ease;
}

.fe-artwork-detail__focus-trigger:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

.fe-artwork-detail__focus-trigger:disabled,
.fe-artwork-detail__zoom button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.fe-artwork-detail__focus-trigger svg {
  height: 13px;
  width: 13px;
}

.fe-artwork-detail__zoom {
  gap: 8px;
}

.fe-artwork-detail__zoom button:not(.fe-artwork-detail__reset),
.fe-artwork-detail__focus-toolbar button {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
  width: 28px;
}

.fe-artwork-detail__zoom button:hover:not(:disabled),
.fe-artwork-detail__focus-toolbar button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.fe-artwork-detail__zoom svg,
.fe-artwork-detail__focus-toolbar svg {
  height: 14px;
  width: 14px;
}

.fe-artwork-detail__zoom output {
  color: rgba(255, 255, 255, 0.5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  min-width: 40px;
  text-align: center;
}

.fe-artwork-detail__reset {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-size: 11px;
  margin-left: 2px;
  padding: 4px;
  transition: color 0.15s ease;
}

.fe-artwork-detail__reset:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.75);
}

.fe-artwork-detail__viewer {
  align-items: center;
  background: rgba(0, 0, 0, 0.34);
  border-radius: 12px;
  cursor: crosshair;
  display: flex;
  height: 460px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  touch-action: none;
  user-select: none;
}

.fe-artwork-detail__viewer.is-zoomed {
  cursor: grab;
}

.fe-artwork-detail__viewer.is-panning {
  cursor: grabbing;
}

.fe-artwork-detail__image-canvas {
  display: inline-block;
  flex: 0 1 auto;
  line-height: 0;
  max-height: 100%;
  max-width: 100%;
  position: relative;
  transform: translate(0, 0) scale(1);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.fe-artwork-detail__viewer.is-panning .fe-artwork-detail__image-canvas {
  transition: none;
}

.fe-artwork-detail__image {
  display: block;
  height: auto;
  max-height: 460px;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  width: auto;
}

.fe-artwork-detail__pin {
  align-items: center;
  background-color: #f5c842 !important;
  background-image: none !important;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
  color: #090909 !important;
  cursor: pointer;
  display: flex;
  font-size: 10px;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
  width: 24px;
  opacity: 1 !important;
  z-index: 5;
}

.fe-artwork-detail__pin:hover,
.fe-artwork-detail__pin.is-active {
  box-shadow: 0 0 0 4px rgba(245, 200, 66, 0.18), 0 3px 10px rgba(0, 0, 0, 0.5);
  filter: brightness(1.1);
}

.fe-artwork-detail__pin.is-pulsing {
  animation: fe-artwork-pin-pulse 0.45s ease;
}

.fe-artwork-detail__pin--preview {
  background: #fff;
  border: 2px solid var(--fe-artwork-yellow);
  pointer-events: none;
}

.fe-artwork-detail__file-meta {
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-top: 12px;
  min-height: 30px;
}

.fe-artwork-detail__file-meta > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fe-artwork-detail__file-meta strong {
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
  font-weight: 550;
  max-width: min(520px, 62vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-artwork-detail__file-meta > div > span {
  margin-top: 3px;
}

.fe-artwork-detail__download {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  padding: 6px 12px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.fe-artwork-detail__download:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.fe-artwork-detail__download svg {
  height: 13px;
  width: 13px;
}

.fe-artwork-detail__annotations {
  align-self: flex-start;
  display: flex;
  flex: 0 0 calc(35% - 16px);
  flex-direction: column;
  height: 560px;
  overflow: hidden;
  padding: 20px;
}

.fe-artwork-detail__annotations-heading {
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.fe-artwork-detail__annotations-heading--focus {
  display: none;
}

.fe-artwork-detail__comments {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  scrollbar-width: thin;
}

.fe-artwork-detail__comments::-webkit-scrollbar {
  width: 4px;
}

.fe-artwork-detail__comments::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.fe-artwork-detail__comment {
  align-items: flex-start;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  outline: 0;
  padding: 10px;
  position: relative;
  transition: background 0.15s ease;
}

.fe-artwork-detail__comment:hover,
.fe-artwork-detail__comment.is-active,
.fe-artwork-detail__comment:focus-visible {
  background: rgba(255, 255, 255, 0.05);
}

.fe-artwork-detail__comment-pin {
  align-items: center;
  background-color: #f5c842 !important;
  background-image: none !important;
  border-radius: 50%;
  color: #090909 !important;
  display: flex;
  flex: 0 0 20px;
  font-size: 9px;
  font-weight: 800;
  height: 20px;
  justify-content: center;
}

.fe-artwork-detail__comment-copy {
  min-width: 0;
  padding-right: 18px;
}

.fe-artwork-detail__comment-author {
  align-items: center;
  display: flex;
  gap: 7px;
}

.fe-artwork-detail__comment-author strong {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 600;
}

.fe-artwork-detail__comment-copy p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  line-height: 1.55;
  margin-top: 3px;
}

.fe-artwork-detail__comment-delete-form {
  position: absolute;
  right: 8px;
  top: 8px;
}

.fe-artwork-detail__comment-delete {
  align-items: center;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  height: 22px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  transition: color 0.15s ease, opacity 0.15s ease;
  width: 22px;
}

.fe-artwork-detail__comment:hover .fe-artwork-detail__comment-delete,
.fe-artwork-detail__comment:focus-within .fe-artwork-detail__comment-delete {
  opacity: 1;
}

.fe-artwork-detail__comment-delete:hover {
  color: var(--fe-artwork-orange);
}

.fe-artwork-detail__comment-delete svg {
  height: 13px;
  width: 13px;
}

.fe-artwork-detail__compose {
  flex: 0 0 auto;
  padding-top: 12px;
}

.fe-artwork-detail__compose > p {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  margin-bottom: 6px;
}

.fe-artwork-detail__compose-row {
  display: flex;
  gap: 8px;
}

.fe-artwork-detail__compose-row input[type="text"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--fe-artwork-border);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.78);
  flex: 1 1 auto;
  font-size: 13px;
  min-width: 0;
  padding: 10px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fe-artwork-detail__compose-row input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.fe-artwork-detail__compose-row input[type="text"]:focus {
  border-color: var(--fe-artwork-yellow);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.12);
  outline: 0;
}

.fe-artwork-detail__compose-row button {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-artwork-yellow), var(--fe-artwork-orange));
  border: 0;
  border-radius: 12px;
  color: #090909;
  cursor: pointer;
  display: flex;
  flex: 0 0 44px;
  justify-content: center;
}

.fe-artwork-detail__compose-row button svg {
  height: 16px;
  width: 16px;
}

.fe-artwork-detail__compose--readonly {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fe-artwork-detail__section {
  padding: 20px;
}

.fe-artwork-detail__reveal {
  animation: fe-artwork-detail-reveal 0.6s cubic-bezier(0.25, 0, 0, 1) both;
  animation-delay: calc(var(--fe-artwork-order, 0) * 50ms);
}

.fe-artwork-detail__section-heading {
  align-items: center;
  color: rgba(255, 255, 255, 0.42);
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  transition: color 0.4s ease;
}

.fe-artwork-detail__card:hover .fe-artwork-detail__section-heading {
  color: var(--fe-artwork-yellow);
}

.fe-artwork-detail__section-heading h2 {
  color: inherit;
  font-size: 13px;
  font-weight: 650;
}

.fe-artwork-detail__section-heading svg {
  height: 16px;
  width: 16px;
}

.fe-artwork-detail__section-heading--split {
  justify-content: space-between;
}

.fe-artwork-detail__section-heading--split > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.fe-artwork-detail__section-heading--split > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 400;
  text-align: right;
}

.fe-artwork-detail__qc-list,
.fe-artwork-detail__qc-item {
  display: flex;
  flex-direction: column;
}

.fe-artwork-detail__qc-list {
  gap: 10px;
}

.fe-artwork-detail__qc-item {
  gap: 6px;
}

.fe-artwork-detail__qc-row {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  min-height: 50px;
  padding: 11px 16px;
}

.fe-artwork-detail__qc-row--pass {
  background: rgba(52, 211, 153, 0.05);
  border-color: rgba(52, 211, 153, 0.12);
}

.fe-artwork-detail__qc-row--warning {
  background: rgba(251, 146, 60, 0.05);
  border-color: rgba(251, 146, 60, 0.12);
}

.fe-artwork-detail__qc-row--fail {
  background: rgba(255, 107, 74, 0.05);
  border-color: rgba(255, 107, 74, 0.12);
}

.fe-artwork-detail__qc-row--missing {
  background: rgba(245, 200, 66, 0.04);
  border-color: rgba(245, 200, 66, 0.12);
}

.fe-artwork-detail__qc-row--optional {
  background: rgba(255, 255, 255, 0.025);
}

.fe-artwork-detail__qc-icon {
  color: rgba(255, 255, 255, 0.34);
  display: flex;
  flex: 0 0 16px;
}

.fe-artwork-detail__qc-row--pass .fe-artwork-detail__qc-icon { color: var(--fe-artwork-green); }
.fe-artwork-detail__qc-row--warning .fe-artwork-detail__qc-icon { color: #fb923c; }
.fe-artwork-detail__qc-row--fail .fe-artwork-detail__qc-icon { color: var(--fe-artwork-orange); }
.fe-artwork-detail__qc-row--missing .fe-artwork-detail__qc-icon { color: var(--fe-artwork-yellow); }

.fe-artwork-detail__qc-icon svg {
  height: 16px;
  width: 16px;
}

.fe-artwork-detail__qc-row > strong {
  color: rgba(255, 255, 255, 0.7);
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 550;
}

.fe-artwork-detail__qc-value {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 650;
  max-width: 42%;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-artwork-detail__status {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 550;
  min-width: 50px;
  padding: 4px 11px;
  text-align: center;
}

.fe-artwork-detail__status--pass {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.22);
  color: var(--fe-artwork-green);
}

.fe-artwork-detail__status--warning {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.22);
  color: #fb923c;
}

.fe-artwork-detail__status--fail {
  background: rgba(255, 107, 74, 0.15);
  border-color: rgba(255, 107, 74, 0.22);
  color: var(--fe-artwork-orange);
}

.fe-artwork-detail__status--missing {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.2);
  color: var(--fe-artwork-yellow);
}

.fe-artwork-detail__status--optional {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.42);
}

.fe-artwork-detail__qc-note {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1.5;
  padding: 9px 14px;
}

.fe-artwork-detail__qc-note--warning {
  background: rgba(251, 146, 60, 0.055);
  border-color: rgba(251, 146, 60, 0.11);
}

.fe-artwork-detail__qc-note--fail {
  background: rgba(255, 107, 74, 0.055);
  border-color: rgba(255, 107, 74, 0.11);
}

.fe-artwork-detail__qc-note--missing {
  background: rgba(245, 200, 66, 0.04);
  border-color: rgba(245, 200, 66, 0.1);
}

.fe-artwork-detail__pipeline-card {
  padding: 22px 28px 24px;
}

.fe-artwork-detail__pipeline-card .fe-artwork-detail__section-heading {
  margin-bottom: 18px;
}

.fe-artwork-detail__pipeline-card .fe-artwork-detail__section-heading h2 {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fe-artwork-detail__pipeline-scroll {
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  scrollbar-width: thin;
}

.fe-artwork-detail__pipeline {
  display: flex;
  min-width: 720px;
  padding: 0;
}

.fe-artwork-detail__pipeline-step {
  --fe-artwork-stage: rgba(255, 255, 255, 0.25);
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  list-style: none;
  min-width: 120px;
  position: relative;
  text-align: center;
}

.fe-artwork-detail__pipeline-step--yellow { --fe-artwork-stage: var(--fe-artwork-yellow); }
.fe-artwork-detail__pipeline-step--orange { --fe-artwork-stage: var(--fe-artwork-orange); }
.fe-artwork-detail__pipeline-step--purple { --fe-artwork-stage: var(--fe-artwork-purple); }
.fe-artwork-detail__pipeline-step--green { --fe-artwork-stage: var(--fe-artwork-green); }
.fe-artwork-detail__pipeline-step--danger { --fe-artwork-stage: #ef4444; }

.fe-artwork-detail__pipeline-line {
  background: rgba(255, 255, 255, 0.06);
  height: 2px;
  position: absolute;
  right: 50%;
  top: 18px;
  width: 100%;
  z-index: 0;
}

.fe-artwork-detail__pipeline-line.is-active {
  background: linear-gradient(90deg, var(--fe-artwork-yellow), var(--fe-artwork-stage));
}

.fe-artwork-detail__pipeline-node {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  font-size: 13px;
  font-weight: 650;
  height: 36px;
  justify-content: center;
  margin-bottom: 7px;
  position: relative;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
  width: 36px;
  z-index: 1;
}

.fe-artwork-detail__pipeline-step.is-complete .fe-artwork-detail__pipeline-node {
  background: linear-gradient(135deg, var(--fe-artwork-yellow), var(--fe-artwork-orange));
  border-color: transparent;
  color: #fff;
}

.fe-artwork-detail__pipeline-step.is-current .fe-artwork-detail__pipeline-node {
  background: color-mix(in srgb, var(--fe-artwork-stage) 16%, rgba(255, 255, 255, 0.04));
  border-color: var(--fe-artwork-stage);
  box-shadow: 0 0 24px color-mix(in srgb, var(--fe-artwork-stage) 24%, transparent);
  color: var(--fe-artwork-stage);
}

.fe-artwork-detail__pipeline-step > strong {
  color: rgba(255, 255, 255, 0.38);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}

.fe-artwork-detail__pipeline-step.is-current > strong {
  color: rgba(255, 255, 255, 0.78);
}

.fe-artwork-detail__pipeline-step > small {
  color: var(--fe-artwork-stage);
  font-size: 9px;
  margin-top: 3px;
}

.fe-artwork-detail__pipeline-step.is-phase-two > small {
  color: rgba(255, 255, 255, 0.24);
}

.fe-artwork-detail__documents {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fe-artwork-detail__document {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  position: relative;
}

.fe-artwork-detail__document-state {
  color: rgba(255, 107, 74, 0.68);
  display: flex;
  flex: 0 0 16px;
}

.fe-artwork-detail__document-state.is-complete {
  color: var(--fe-artwork-green);
}

.fe-artwork-detail__document-state svg {
  height: 16px;
  width: 16px;
}

.fe-artwork-detail__document > strong {
  color: rgba(255, 255, 255, 0.78);
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
}

.fe-artwork-detail__document > small {
  color: rgba(255, 255, 255, 0.25);
  font-size: 9px;
}

.fe-artwork-detail__small-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  list-style: none;
  padding: 5px 12px;
  text-decoration: none;
}

.fe-artwork-detail__small-action::-webkit-details-marker {
  display: none;
}

.fe-artwork-detail__small-action--upload {
  background: rgba(245, 200, 66, 0.1);
  border-color: rgba(245, 200, 66, 0.2);
  color: var(--fe-artwork-yellow);
}

.fe-artwork-detail__small-action--muted {
  color: rgba(255, 255, 255, 0.28);
  cursor: default;
}

.fe-artwork-detail__document-files {
  position: relative;
}

.fe-artwork-detail__document-files > div {
  background: rgba(10, 10, 10, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 210px;
  padding: 7px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
}

.fe-artwork-detail__document-files > div a {
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
  overflow: hidden;
  padding: 7px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-artwork-detail__document-files > div a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.fe-artwork-detail__delivery.is-approved {
  background: rgba(52, 211, 153, 0.025);
  border-color: rgba(52, 211, 153, 0.18);
}

.fe-artwork-detail__delivery.is-approved .fe-artwork-detail__section-heading {
  color: var(--fe-artwork-yellow);
}

.fe-artwork-detail__delivery.is-approved .fe-artwork-detail__section-heading h2 {
  color: #fff;
}

.fe-artwork-detail__prerequisites {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.fe-artwork-detail__prerequisites span {
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 550;
  padding: 6px 15px;
}

.fe-artwork-detail__prerequisites .is-complete {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.22);
  color: var(--fe-artwork-green);
}

.fe-artwork-detail__prerequisites .is-incomplete {
  background: rgba(255, 107, 74, 0.1);
  border-color: rgba(255, 107, 74, 0.16);
  color: var(--fe-artwork-orange);
}

.fe-artwork-detail__feedback-summary {
  margin-top: 12px;
}

.fe-artwork-detail__feedback-summary > summary {
  color: var(--fe-artwork-yellow);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  list-style: none;
  width: fit-content;
}

.fe-artwork-detail__feedback-summary > summary::-webkit-details-marker {
  display: none;
}

.fe-artwork-detail__feedback-summary > div {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  margin-top: 9px;
  padding: 12px;
}

.fe-artwork-detail__signoff {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.fe-artwork-detail__signoff > svg {
  color: var(--fe-artwork-green);
  height: 12px;
  width: 12px;
}

.fe-artwork-detail__signoff > span {
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 999px;
  color: var(--fe-artwork-green);
  font-size: 12px;
  font-weight: 550;
  padding: 6px 14px;
}

.fe-artwork-detail__signoff > .fe-artwork-detail__signoff-pending {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

.fe-artwork-detail__delivery-trigger {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: 48px;
  justify-content: center;
  width: 100%;
}

.fe-artwork-detail__delivery-trigger.is-ready {
  background: linear-gradient(135deg, var(--fe-artwork-yellow), var(--fe-artwork-orange));
  border-color: transparent;
  color: #111;
}

.fe-artwork-detail__delivery-trigger svg {
  height: 16px;
  width: 16px;
}

.fe-artwork-detail__delivery-caption {
  align-items: center;
  color: rgba(255, 255, 255, 0.28);
  display: flex;
  font-size: 10px;
  gap: 6px;
  justify-content: center;
  margin-top: 10px !important;
}

.fe-artwork-detail__delivery-caption svg {
  height: 11px;
  width: 11px;
}

.fe-artwork-detail__empty {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.32);
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: center;
  min-height: 84px;
  padding: 20px;
  text-align: center;
}

.fe-artwork-detail__empty--viewer {
  border: 0;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.fe-artwork-detail__empty--viewer svg {
  height: 28px;
  width: 28px;
}

.fe-artwork-detail__empty--viewer strong {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.fe-artwork-detail__empty--viewer span,
.fe-artwork-detail__empty--comments span {
  color: rgba(255, 255, 255, 0.28);
  font-size: 10px;
}

.fe-artwork-detail__empty--comments {
  background: transparent;
  border: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.fe-artwork-detail :is(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fe-artwork-yellow);
  outline-offset: 3px;
}

/* Artwork asset detail: final review workflow. */
.fe-artwork-detail__review-panel {
  background: rgba(255, 255, 255, 0.03);
  padding: 20px 24px;
}

.fe-artwork-detail__review-panel.is-approved {
  background: rgba(52, 211, 153, 0.025);
  border-color: rgba(52, 211, 153, 0.18);
}

.fe-artwork-detail__review-panel.is-changes_requested {
  background: rgba(245, 200, 66, 0.025);
  border-color: rgba(245, 200, 66, 0.18);
}

.fe-artwork-detail__review-panel.is-rejected {
  background: rgba(239, 68, 68, 0.025);
  border-color: rgba(239, 68, 68, 0.18);
}

.fe-artwork-detail__review-header {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fe-artwork-detail__review-header h2 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.fe-artwork-detail .fe-artwork-detail__review-header > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  line-height: 16px;
  text-align: right;
}

.fe-artwork-detail__review-summary {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  min-height: 50px;
  padding: 12px 16px;
}

.fe-artwork-detail__version-pill,
.fe-artwork-detail__review-status {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 16px;
  padding: 3px 10px;
}

.fe-artwork-detail__version-pill {
  background: rgba(245, 200, 66, 0.12);
  border: 1px solid rgba(245, 200, 66, 0.22);
  color: var(--fe-artwork-yellow);
  font-weight: 600;
}

.fe-artwork-detail__review-status {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.42);
}

.fe-artwork-detail__review-status.is-approved {
  background: rgba(52, 211, 153, 0.13);
  color: var(--fe-artwork-green);
}

.fe-artwork-detail__review-status.is-changes_requested {
  background: rgba(245, 200, 66, 0.12);
  color: var(--fe-artwork-yellow);
}

.fe-artwork-detail__review-status.is-rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.fe-artwork-detail__review-file {
  color: rgba(255, 255, 255, 0.4);
  flex: 1 1 auto;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-artwork-detail button.fe-artwork-detail__assign-reviewers {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 12px;
  padding: 5px 0;
  transition: color 160ms ease;
}

.fe-artwork-detail button.fe-artwork-detail__assign-reviewers:hover {
  color: rgba(255, 255, 255, 0.72);
}

.fe-artwork-detail__decision-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fe-artwork-detail__decision-form {
  display: block;
  margin: 0;
}

.fe-artwork-detail button.fe-artwork-detail__decision {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  height: 44px;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  width: 100%;
}

.fe-artwork-detail button.fe-artwork-detail__decision--approve {
  background: rgba(52, 211, 153, 0.04);
  border-color: rgba(52, 211, 153, 0.28);
  color: var(--fe-artwork-green);
}

.fe-artwork-detail button.fe-artwork-detail__decision--approve:hover {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.42);
}

.fe-artwork-detail button.fe-artwork-detail__decision--changes {
  background: rgba(245, 200, 66, 0.04);
  border-color: rgba(245, 200, 66, 0.28);
  color: var(--fe-artwork-yellow);
}

.fe-artwork-detail button.fe-artwork-detail__decision--changes:hover,
.fe-artwork-detail button.fe-artwork-detail__decision--changes[aria-expanded="true"] {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.42);
}

.fe-artwork-detail button.fe-artwork-detail__decision--reject {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.28);
  color: #ef4444;
}

.fe-artwork-detail button.fe-artwork-detail__decision--reject:hover,
.fe-artwork-detail button.fe-artwork-detail__decision--reject[aria-expanded="true"] {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.42);
}

.fe-artwork-detail__feedback-panel {
  overflow: hidden;
  padding-top: 16px;
}

.fe-artwork-detail__feedback-panel form {
  display: grid;
  gap: 10px;
}

.fe-artwork-detail__feedback-panel textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  height: 80px;
  line-height: 1.5;
  min-height: 80px;
  padding: 12px 16px;
  resize: vertical;
  width: 100%;
}

.fe-artwork-detail__feedback-panel textarea::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.fe-artwork-detail__feedback-panel--changes textarea:focus {
  border-color: var(--fe-artwork-yellow);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.1);
  outline: 0;
}

.fe-artwork-detail__feedback-panel--reject textarea:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  outline: 0;
}

.fe-artwork-detail__feedback-panel form > div {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.fe-artwork-detail__feedback-panel button,
.fe-artwork-detail__feedback-panel input[type="submit"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 13px;
  min-height: 36px;
  padding: 7px 16px;
}

.fe-artwork-detail__feedback-panel--changes input[type="submit"] {
  background: rgba(245, 200, 66, 0.14);
  border-color: rgba(245, 200, 66, 0.3);
  color: var(--fe-artwork-yellow);
  font-weight: 600;
}

.fe-artwork-detail__feedback-panel--reject input[type="submit"] {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-weight: 600;
}

.fe-artwork-detail__decision-state {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.fe-artwork-detail__decision-state > span {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.52);
  display: flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
}

.fe-artwork-detail__decision-state > span svg {
  height: 18px;
  width: 18px;
}

.fe-artwork-detail__decision-state > div {
  flex: 1 1 auto;
  min-width: 0;
}

.fe-artwork-detail__decision-state strong {
  color: rgba(255, 255, 255, 0.82);
  display: block;
  font-size: 14px;
  font-weight: 650;
}

.fe-artwork-detail__decision-state p,
.fe-artwork-detail__decision-state small {
  color: rgba(255, 255, 255, 0.46);
  display: block;
  font-size: 12px;
  line-height: 1.55;
  margin-top: 5px;
}

.fe-artwork-detail__decision-state--approved > span,
.fe-artwork-detail__decision-state--approved strong {
  color: var(--fe-artwork-green);
}

.fe-artwork-detail__decision-state--approved > span {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.2);
}

.fe-artwork-detail__decision-state--changes > span,
.fe-artwork-detail__decision-state--changes strong {
  color: var(--fe-artwork-yellow);
}

.fe-artwork-detail__decision-state--rejected > span,
.fe-artwork-detail__decision-state--rejected strong {
  color: #ef4444;
}

.fe-artwork-detail__state-action {
  align-self: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  flex: 0 0 auto;
  font-size: 12px;
  padding: 8px 16px;
  text-decoration: none;
}

.fe-artwork-detail__submit-form {
  align-self: center;
  flex: 0 0 auto;
}

.fe-artwork-detail button.fe-artwork-detail__state-action--submit {
  background: linear-gradient(135deg, var(--fe-artwork-yellow), var(--fe-artwork-orange));
  border-color: transparent;
  color: #17130b;
  cursor: pointer;
  font-weight: 650;
}

.fe-artwork-detail button.fe-artwork-detail__state-action--submit:hover {
  filter: brightness(1.06);
}

.fe-artwork-detail .fe-projects-index-team-modal {
  z-index: 10020;
}

.fe-artwork-detail__focus-brand,
.fe-artwork-detail__focus-meta,
.fe-artwork-detail__focus-toolbar {
  display: none;
}

body.fe-artwork-detail-focus-open {
  overflow: hidden;
}

body.fe-artwork-detail-focus-open [data-nav-shell],
body.fe-artwork-detail-focus-open .fe-artwork-detail__breadcrumb-bar {
  display: none !important;
}

body.fe-artwork-detail-focus-open [data-page-transition-shell],
body.fe-artwork-detail-focus-open [data-page-transition-scope],
body.fe-artwork-detail-focus-open [data-page-transition-item] {
  transform: none !important;
  will-change: auto !important;
}

.fe-artwork-detail__media-shell.is-focus-mode {
  animation: fe-artwork-focus-in 0.3s ease both;
  background: #000;
  display: grid !important;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 300px;
  height: 100dvh;
  inset: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  position: fixed !important;
  width: 100vw;
  z-index: 9999;
}

.fe-artwork-detail__media-shell.is-focus-mode:focus {
  outline: none;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__media-column {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  height: 100dvh;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__viewer-card {
  background: #000;
  border: 0;
  border-radius: 0;
  height: 100%;
  padding: 0;
  width: 100%;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__viewer-heading,
.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__file-meta {
  display: none;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__viewer {
  background: #000;
  border-radius: 0;
  height: 100%;
  width: 100%;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__image-canvas {
  max-height: 100dvh;
  max-width: calc(100vw - 300px);
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__image {
  max-height: 100dvh;
  max-width: calc(100vw - 300px);
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__annotations {
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.62);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  flex: 0 0 300px;
  height: 100dvh;
  padding: 0;
  width: 300px;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__annotations-heading--default {
  display: none;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__annotations-heading--focus {
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 5px;
  letter-spacing: 0;
  margin: 0;
  padding: 16px 20px;
  text-transform: none;
}

.fe-artwork-detail__annotations-heading--focus strong {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-artwork-detail__annotations-heading--focus span {
  background: rgba(167, 139, 250, 0.15);
  border-radius: 999px;
  color: var(--fe-artwork-purple);
  font-size: 10px;
  padding: 2px 8px;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__comments {
  gap: 10px;
  padding: 16px;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__comment {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__comment-pin {
  display: none;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__compose {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
}

.fe-artwork-detail__focus-brand,
.fe-artwork-detail__focus-meta {
  pointer-events: none;
  position: absolute;
  top: 20px;
  z-index: 20;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__focus-brand {
  align-items: center;
  color: rgba(255, 255, 255, 0.42);
  display: flex;
  font-size: 12px;
  gap: 8px;
  left: 20px;
}

.fe-artwork-detail__focus-logo {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-artwork-yellow), var(--fe-artwork-orange));
  border-radius: 50%;
  color: #000;
  display: flex;
  font-size: 11px;
  font-weight: 750;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__focus-meta {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  right: 20px;
}

.fe-artwork-detail__focus-meta > span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
}

.fe-artwork-detail__focus-meta small {
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
  margin-top: 2px;
}

.fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__focus-toolbar {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  bottom: 24px;
  display: flex;
  gap: 9px;
  left: calc((100% - 300px) / 2);
  padding: 9px 14px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 24;
}

.fe-artwork-detail__focus-toolbar output {
  color: rgba(255, 255, 255, 0.58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  min-width: 38px;
  text-align: center;
}

.fe-artwork-detail__focus-toolbar > span {
  background: rgba(255, 255, 255, 0.1);
  height: 18px;
  width: 1px;
}

@keyframes fe-artwork-detail-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fe-artwork-pin-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.4); }
}

@keyframes fe-artwork-focus-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 1100px) {
  .fe-artwork-detail__workspace {
    width: calc(100% - 40px);
  }

  .fe-artwork-detail__review-header,
  .fe-artwork-detail__review-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fe-artwork-detail .fe-artwork-detail__review-header > span {
    text-align: left;
  }

  .fe-artwork-detail__review-file {
    flex-basis: 45%;
  }

  .fe-artwork-detail__media-shell:not(.is-focus-mode) {
    flex-direction: column;
  }

  .fe-artwork-detail__media-shell:not(.is-focus-mode) .fe-artwork-detail__media-column,
  .fe-artwork-detail__media-shell:not(.is-focus-mode) .fe-artwork-detail__annotations {
    flex-basis: auto;
    width: 100%;
  }

  .fe-artwork-detail__media-shell:not(.is-focus-mode) .fe-artwork-detail__annotations {
    height: 420px;
  }
}

@media (max-width: 767px) {
  .fe-artwork-detail {
    padding-top: 64px;
  }

  .fe-artwork-detail__breadcrumb-bar {
    height: 64px;
  }

  .fe-artwork-detail__breadcrumb-inner {
    gap: 11px;
    padding: 0 16px;
  }

  .fe-artwork-detail__breadcrumbs {
    font-size: 11px;
  }

  .fe-artwork-detail__breadcrumb-upload {
    font-size: 11px;
    min-height: 36px;
    padding: 7px 11px;
  }

  .fe-artwork-detail__breadcrumbs li:first-child,
  .fe-artwork-detail__breadcrumbs li:first-child + li {
    display: none;
  }

  .fe-artwork-detail__workspace {
    gap: 16px;
    padding: 24px 0 36px;
    width: calc(100% - 32px);
  }

  .fe-artwork-detail__viewer-card,
  .fe-artwork-detail__annotations,
  .fe-artwork-detail__section {
    padding: 16px;
  }

  .fe-artwork-detail__review-panel {
    padding: 18px;
  }

  .fe-artwork-detail__review-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .fe-artwork-detail__review-summary {
    align-items: flex-start;
  }

  .fe-artwork-detail__review-file {
    flex: 1 0 100%;
    white-space: normal;
  }

  .fe-artwork-detail__decision-grid {
    grid-template-columns: 1fr;
  }

  .fe-artwork-detail__decision-state {
    flex-wrap: wrap;
  }

  .fe-artwork-detail__state-action {
    margin-left: 52px;
  }

  .fe-artwork-detail__submit-form {
    margin-left: 52px;
  }

  .fe-artwork-detail__submit-form .fe-artwork-detail__state-action {
    margin-left: 0;
  }

  .fe-artwork-detail__viewer-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .fe-artwork-detail__viewer-tools {
    justify-content: space-between;
    width: 100%;
  }

  .fe-artwork-detail__viewer {
    height: 38vh;
    min-height: 280px;
  }

  .fe-artwork-detail__image {
    max-height: 38vh;
  }

  .fe-artwork-detail__file-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .fe-artwork-detail__annotations {
    height: 380px !important;
  }

  .fe-artwork-detail__section-heading--split {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .fe-artwork-detail__section-heading--split > span {
    text-align: left;
  }

  .fe-artwork-detail__qc-row {
    align-items: start;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
  }

  .fe-artwork-detail__qc-value {
    grid-column: 2 / -1;
    max-width: 100%;
    text-align: left;
  }

  .fe-artwork-detail__status {
    grid-column: 3;
    grid-row: 1;
  }

  .fe-artwork-detail__documents {
    grid-template-columns: 1fr;
  }

  .fe-artwork-detail__pipeline-card {
    padding: 18px 16px;
  }

  .fe-artwork-detail__media-shell.is-focus-mode {
    grid-template-columns: 1fr;
    grid-template-rows: 62dvh 38dvh;
  }

  .fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__media-column {
    flex: 0 0 62dvh;
    height: 62dvh;
    width: 100%;
  }

  .fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__annotations {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex: 1 1 auto;
    height: 38dvh !important;
    width: 100%;
  }

  .fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__image-canvas,
  .fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__image {
    max-height: 62dvh;
    max-width: 100vw;
  }

  .fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__focus-meta {
    max-width: 42vw;
    right: 20px;
  }

  .fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__focus-toolbar {
    bottom: calc(38dvh + 10px);
    left: 50%;
  }

  .fe-artwork-detail__media-shell.is-focus-mode .fe-artwork-detail__compose {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-artwork-detail *,
  .fe-artwork-detail *::before,
  .fe-artwork-detail *::after,
  .fe-artwork-detail__media-shell.is-focus-mode {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Content asset detail — screenshot-backed Phase 2 UI prototype. */
.fe-content-detail-main {
  max-width: none !important;
  padding: 0 !important;
}

.fe-content-detail {
  --fe-content-bg: #1a1a1a;
  --fe-content-card: var(--fe-detail-card-surface);
  --fe-content-border: rgba(255, 255, 255, 0.1);
  --fe-content-faint-border: rgba(255, 255, 255, 0.06);
  --fe-content-text: #fff;
  --fe-content-muted: rgba(255, 255, 255, 0.5);
  --fe-content-dim: rgba(255, 255, 255, 0.32);
  --fe-content-yellow: #f5c842;
  --fe-content-orange: #ff6b4a;
  --fe-content-purple: #a78bfa;
  --fe-content-cyan: #06b6d4;
  --fe-content-green: #34d399;
  color: var(--fe-content-text);
  isolation: isolate;
  min-height: 100vh;
  padding-top: 72px;
  position: relative;
}

.fe-content-detail *,
.fe-content-detail *::before,
.fe-content-detail *::after {
  box-sizing: border-box;
}

.fe-content-detail h1,
.fe-content-detail h2,
.fe-content-detail p,
.fe-content-detail ol,
.fe-content-detail hr {
  margin: 0;
}

.fe-content-detail button,
.fe-content-detail input {
  font: inherit;
}

.fe-content-detail button {
  cursor: pointer;
}

.fe-content-detail [hidden] {
  display: none !important;
}

.fe-content-detail__ambient {
  inset: 72px 0 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.fe-content-detail__glow {
  animation: fe-content-glow 10s ease-in-out infinite;
  border-radius: 50%;
  filter: blur(12px);
  height: 520px;
  opacity: 0.8;
  position: absolute;
  width: 520px;
}

.fe-content-detail__glow--mint {
  background: radial-gradient(circle, rgba(52, 211, 153, 0.08), transparent 70%);
  left: 9%;
  top: 7%;
}

.fe-content-detail__glow--cyan {
  animation-delay: -4s;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.07), transparent 70%);
  right: 2%;
  top: -8%;
}

.fe-content-detail__glow--gold {
  animation-delay: -7s;
  background: radial-gradient(circle, rgba(245, 200, 66, 0.05), transparent 70%);
  bottom: 8%;
  left: 32%;
}

.fe-content-detail__breadcrumb-bar {
  align-items: center;
  background: rgba(0, 0, 0, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  height: 72px;
  position: relative;
  z-index: 1;
}

.fe-content-detail__breadcrumb-inner {
  align-items: center;
  display: flex;
  gap: 16px;
  padding: 0 32px;
  width: 100%;
}

.fe-content-detail__back {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.58);
  display: inline-flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.fe-content-detail__back:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  transform: translateX(-1px);
}

.fe-content-detail__back svg,
.fe-content-detail__breadcrumb-inner nav svg {
  height: 16px;
  width: 16px;
}

.fe-content-detail__breadcrumb-inner nav {
  align-items: center;
  color: rgba(255, 255, 255, 0.36);
  display: flex;
  font-size: 13px;
  gap: 7px;
  min-width: 0;
}

.fe-content-detail__breadcrumb-inner nav a {
  color: inherit;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.fe-content-detail__breadcrumb-inner nav a:hover {
  color: rgba(255, 255, 255, 0.72);
}

.fe-content-detail__breadcrumb-inner nav strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-content-detail__workspace {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  max-width: 1400px;
  padding: 48px 0 64px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.fe-content-detail__card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--fe-content-card);
  border: 1px solid var(--fe-content-border);
  border-radius: 16px;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.fe-content-detail__review-shell {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  min-width: 0;
}

.fe-content-detail__document-column {
  flex: 0 0 65%;
  min-width: 0;
}

.fe-content-detail__document-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.fe-content-detail__document-toolbar {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fe-content-detail__document-toolbar > span,
.fe-content-detail__comments > h2 {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fe-content-detail__document-toolbar > div {
  align-items: center;
  display: flex;
  gap: 12px;
}

.fe-content-detail__document-toolbar small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}

.fe-content-detail__document-toolbar button {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  min-height: 30px;
  padding: 5px 11px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fe-content-detail__document-toolbar button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.fe-content-detail__document-toolbar button svg {
  height: 13px;
  width: 13px;
}

.fe-content-detail__document-toolbar .fe-content-detail__focus-trigger {
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  padding-inline: 10px;
}

.fe-content-detail__reading-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  height: 3px;
  margin-bottom: 16px;
  overflow: hidden;
}

.fe-content-detail__reading-track span {
  background: linear-gradient(135deg, var(--fe-content-green), var(--fe-content-cyan));
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 0.1s linear;
  width: 0;
}

.fe-content-detail__document {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--fe-content-faint-border);
  border-radius: 12px;
  height: 460px;
  overflow-y: auto;
  padding: 24px;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  scrollbar-width: thin;
}

.fe-content-detail__document::-webkit-scrollbar,
.fe-content-detail__comment-list::-webkit-scrollbar {
  width: 4px;
}

.fe-content-detail__document::-webkit-scrollbar-thumb,
.fe-content-detail__comment-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.fe-content-detail__document-kicker {
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  letter-spacing: 0.1em;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.fe-content-detail__document-kicker span:last-child {
  letter-spacing: 0;
  text-transform: none;
}

.fe-content-detail__document h1 {
  color: #fff;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
  margin-bottom: 8px;
}

.fe-content-detail__document p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.fe-content-detail__document .fe-content-detail__subheadline {
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  margin-bottom: 20px;
}

.fe-content-detail__document hr {
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  height: 1px;
  margin-bottom: 20px;
}

.fe-content-detail__document footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 4px;
  margin-top: 24px;
  padding-top: 20px;
}

.fe-content-detail__comments {
  align-self: flex-start;
  display: flex;
  flex: 0 0 calc(35% - 16px);
  flex-direction: column;
  height: 520px;
  min-width: 0;
  overflow: hidden;
  padding: 20px;
}

.fe-content-detail__comments > h2 {
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.fe-content-detail__comment-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  scrollbar-width: thin;
}

.fe-content-detail__comment {
  align-items: flex-start;
  border-radius: 12px;
  display: flex;
  gap: 10px;
  padding: 10px;
  transition: background 0.15s ease;
}

.fe-content-detail__comment:hover {
  background: rgba(255, 255, 255, 0.05);
}

.fe-content-detail__avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-content-green), var(--fe-content-cyan));
  border-radius: 50%;
  color: #00110d;
  display: flex;
  flex: 0 0 20px;
  font-size: 9px;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  margin-top: 2px;
}

.fe-content-detail__comment > div {
  min-width: 0;
}

.fe-content-detail__comment strong {
  color: rgba(255, 255, 255, 0.72);
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 2px;
}

.fe-content-detail__comment p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  line-height: 1.55;
}

.fe-content-detail__composer {
  flex: 0 0 auto;
  padding-top: 12px;
}

.fe-content-detail__composer label {
  color: rgba(255, 255, 255, 0.3);
  display: block;
  font-size: 10px;
  margin-bottom: 6px;
}

.fe-content-detail__composer > div {
  display: flex;
  gap: 8px;
}

.fe-content-detail__composer input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  flex: 1 1 auto;
  font-size: 13px;
  min-width: 0;
  outline: 0;
  padding: 10px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fe-content-detail__composer input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.fe-content-detail__composer input:focus {
  border-color: var(--fe-content-green);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12);
}

.fe-content-detail__composer button {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-content-green), var(--fe-content-cyan));
  border: 0;
  border-radius: 12px;
  color: #00110d;
  display: flex;
  flex: 0 0 44px;
  justify-content: center;
}

.fe-content-detail__composer button svg {
  height: 17px;
  width: 17px;
}

.fe-content-detail__review-actions {
  padding: 20px 24px;
}

.fe-content-detail__review-actions.is-approved {
  background: rgba(52, 211, 153, 0.03);
  border-color: rgba(52, 211, 153, 0.2);
}

.fe-content-detail__review-actions.is-changes-requested {
  background: rgba(245, 200, 66, 0.03);
  border-color: rgba(245, 200, 66, 0.2);
}

.fe-content-detail__review-actions.is-rejected {
  background: rgba(239, 68, 68, 0.03);
  border-color: rgba(239, 68, 68, 0.2);
}

.fe-content-detail__review-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fe-content-detail__review-header h2 {
  color: #fff;
  font-size: 15px;
  font-weight: 650;
}

.fe-content-detail__review-header > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.fe-content-detail__review-summary {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  min-height: 50px;
  padding: 12px 16px;
}

.fe-content-detail__review-version,
.fe-content-detail__review-status {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 11px;
  padding: 4px 10px;
}

.fe-content-detail__review-version {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.2);
  color: var(--fe-content-green);
  font-weight: 650;
}

.fe-content-detail__review-status {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
}

.fe-content-detail__review-file {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-content-detail button.fe-content-detail__assign-reviewers {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 12px;
  margin-left: auto;
  padding: 5px 0;
  transition: color 0.2s ease;
}

.fe-content-detail button.fe-content-detail__assign-reviewers:hover {
  color: rgba(255, 255, 255, 0.7);
}

.fe-content-detail__decision-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fe-content-detail button.fe-content-detail__decision {
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  min-height: 44px;
  padding: 10px 24px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.fe-content-detail button.fe-content-detail__decision:hover {
  transform: translateY(-1px);
}

.fe-content-detail button.fe-content-detail__decision--approve {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: var(--fe-content-green);
}

.fe-content-detail button.fe-content-detail__decision--approve:hover {
  background: rgba(52, 211, 153, 0.2);
  border-color: rgba(52, 211, 153, 0.4);
}

.fe-content-detail button.fe-content-detail__decision--changes {
  background: rgba(245, 200, 66, 0.12);
  border: 1px solid rgba(245, 200, 66, 0.25);
  color: var(--fe-content-yellow);
}

.fe-content-detail button.fe-content-detail__decision--changes:hover {
  background: rgba(245, 200, 66, 0.2);
  border-color: rgba(245, 200, 66, 0.4);
}

.fe-content-detail button.fe-content-detail__decision--reject {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

.fe-content-detail button.fe-content-detail__decision--reject:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}

.fe-content-detail__review-feedback {
  animation: fe-content-review-reveal 0.2s ease both;
  padding-top: 16px;
}

.fe-content-detail__review-feedback[hidden],
.fe-content-detail__review-state[hidden] {
  display: none;
}

.fe-content-detail__review-feedback textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  min-height: 80px;
  outline: 0;
  padding: 12px 16px;
  resize: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.fe-content-detail__review-feedback textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.fe-content-detail__review-feedback--changes textarea:focus {
  border-color: var(--fe-content-yellow);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.1);
}

.fe-content-detail__review-feedback--reject textarea:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.fe-content-detail__review-feedback form > div {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

.fe-content-detail__review-feedback button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  padding: 7px 16px;
}

.fe-content-detail__review-feedback--changes button[type="submit"] {
  background: rgba(245, 200, 66, 0.15);
  border-color: rgba(245, 200, 66, 0.3);
  color: var(--fe-content-yellow);
  font-weight: 650;
  padding-inline: 20px;
}

.fe-content-detail__review-feedback--reject button[type="submit"] {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-weight: 650;
  padding-inline: 20px;
}

.fe-content-detail__review-state {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.fe-content-detail__review-state-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
}

.fe-content-detail__review-state-icon svg {
  height: 18px;
  width: 18px;
}

.fe-content-detail__review-state > div {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
}

.fe-content-detail__review-state strong {
  font-size: 14px;
  font-weight: 650;
}

.fe-content-detail__review-state p {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}

.fe-content-detail__review-state .fe-content-detail__review-note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
}

.fe-content-detail__review-state small {
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  margin-top: 8px;
}

.fe-content-detail__review-state footer {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.fe-content-detail__review-state footer > span {
  color: rgba(255, 255, 255, 0.35);
  flex: 1 1 auto;
  font-size: 12px;
}

.fe-content-detail__review-state footer > a {
  background: linear-gradient(135deg, var(--fe-content-yellow), var(--fe-content-orange));
  border-radius: 999px;
  color: #000;
  font-size: 13px;
  font-weight: 650;
  padding: 8px 20px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.fe-content-detail__review-state footer > a:hover {
  transform: scale(1.02);
}

.fe-content-detail__review-state > div > button {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  margin-top: 8px;
  padding: 4px 0;
}

.fe-content-detail__review-state--approved .fe-content-detail__review-state-icon {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.2);
  color: var(--fe-content-green);
}

.fe-content-detail__review-state--approved strong {
  color: var(--fe-content-green);
}

.fe-content-detail__review-state--changes .fe-content-detail__review-state-icon {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.2);
  color: var(--fe-content-yellow);
}

.fe-content-detail__review-state--changes strong {
  color: var(--fe-content-yellow);
}

.fe-content-detail__review-state--rejected .fe-content-detail__review-state-icon {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.fe-content-detail__review-state--rejected strong {
  color: #ef4444;
}

.fe-content-detail__section {
  padding: 20px;
}

.fe-content-detail__section-heading {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fe-content-detail__section-heading > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.fe-content-detail__section-heading svg {
  color: rgba(255, 255, 255, 0.4);
  height: 16px;
  width: 16px;
}

.fe-content-detail__section-heading h2 {
  color: #fff;
  font-size: 14px;
  font-weight: 650;
}

.fe-content-detail__section-heading > span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  text-align: right;
}

.fe-content-detail__qc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fe-content-detail__qc-row {
  align-items: center;
  background: rgba(52, 211, 153, 0.05);
  border: 1px solid rgba(52, 211, 153, 0.1);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  min-height: 54px;
  padding: 12px 16px;
}

.fe-content-detail__qc-icon,
.fe-content-detail__qc-icon svg {
  color: var(--fe-content-green);
  height: 16px;
  width: 16px;
}

.fe-content-detail__qc-row > strong {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 550;
}

.fe-content-detail__qc-value {
  color: #fff;
  font-size: 14px;
  font-weight: 650;
}

.fe-content-detail__status {
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 999px;
  color: var(--fe-content-green);
  font-size: 11px;
  font-weight: 550;
  min-width: 50px;
  padding: 5px 12px;
  text-align: center;
}

.fe-content-detail__qc-item > p {
  background: rgba(255, 107, 74, 0.06);
  border: 1px solid rgba(255, 107, 74, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 6px;
  padding: 10px 16px;
}

.fe-content-detail__qc-item--warning .fe-content-detail__qc-row {
  background: rgba(251, 146, 60, 0.05);
  border-color: rgba(251, 146, 60, 0.1);
}

.fe-content-detail__qc-item--warning .fe-content-detail__qc-icon,
.fe-content-detail__qc-item--warning .fe-content-detail__qc-icon svg {
  color: #fb923c;
}

.fe-content-detail__qc-item--warning .fe-content-detail__status {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.fe-content-detail__qc-item--warning > p {
  background: rgba(251, 146, 60, 0.06);
  border-color: rgba(251, 146, 60, 0.1);
}

.fe-content-detail__qc-item--fail .fe-content-detail__qc-row {
  background: rgba(255, 107, 74, 0.05);
  border-color: rgba(255, 107, 74, 0.1);
}

.fe-content-detail__qc-item--fail .fe-content-detail__qc-icon,
.fe-content-detail__qc-item--fail .fe-content-detail__qc-icon svg {
  color: var(--fe-content-orange);
}

.fe-content-detail__qc-item--fail .fe-content-detail__status {
  background: rgba(255, 107, 74, 0.15);
  border-color: rgba(255, 107, 74, 0.2);
  color: var(--fe-content-orange);
}

.fe-content-detail__pipeline-card {
  padding: 24px 28px;
}

.fe-content-detail__pipeline-card .fe-content-detail__section-heading {
  margin-bottom: 18px;
}

.fe-content-detail__pipeline-card .fe-content-detail__section-heading h2 {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fe-content-detail__pipeline-scroll {
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  scrollbar-width: thin;
}

.fe-content-detail__pipeline {
  display: flex;
  min-width: 900px;
  padding: 0;
}

.fe-content-detail__stage {
  flex: 1 1 0;
  list-style: none;
  min-width: 130px;
  position: relative;
}

.fe-content-detail__stage button {
  align-items: center;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 1;
}

.fe-content-detail__stage-node {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  font-size: 14px;
  font-weight: 650;
  height: 36px;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease;
  width: 36px;
}

.fe-content-detail__stage-check,
.fe-content-detail__stage-check svg {
  display: none;
  height: 15px;
  width: 15px;
}

.fe-content-detail__stage-label {
  font-size: 10px;
  line-height: 1.2;
  max-width: 64px;
  min-height: 24px;
  text-align: center;
}

.fe-content-detail__stage-connector {
  background: rgba(255, 255, 255, 0.08);
  height: 2px;
  left: calc(50% + 26px);
  position: absolute;
  right: calc(-50% + 26px);
  top: 17px;
  z-index: 0;
}

.fe-content-detail__stage-connector.is-active {
  background: linear-gradient(90deg, var(--fe-content-yellow), var(--fe-content-orange));
}

.fe-content-detail__stage.is-complete .fe-content-detail__stage-node {
  background: linear-gradient(135deg, var(--fe-content-yellow), var(--fe-content-orange));
  border-color: transparent;
  color: #fff;
}

.fe-content-detail__stage.is-complete .fe-content-detail__stage-check,
.fe-content-detail__stage.is-complete .fe-content-detail__stage-check svg {
  display: block;
}

.fe-content-detail__stage.is-complete .fe-content-detail__stage-number {
  display: none;
}

.fe-content-detail__stage.is-current .fe-content-detail__stage-node {
  animation: fe-content-stage-pulse 2s ease-in-out infinite;
  background: rgba(245, 200, 66, 0.15);
  border-color: var(--fe-content-yellow);
  color: var(--fe-content-yellow);
}

.fe-content-detail__stage button:hover .fe-content-detail__stage-node {
  transform: translateY(-1px);
}

.fe-content-detail__documents {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fe-content-detail__document-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  min-height: 46px;
  padding: 9px 12px;
}

.fe-content-detail__document-state,
.fe-content-detail__document-state svg {
  color: rgba(255, 107, 74, 0.65);
  flex: 0 0 16px;
  height: 16px;
  width: 16px;
}

.fe-content-detail__document-state--complete {
  display: none;
}

.fe-content-detail__document-row.is-uploaded .fe-content-detail__document-state--complete {
  display: inline-flex;
}

.fe-content-detail__document-row.is-uploaded .fe-content-detail__document-state--complete svg {
  color: var(--fe-content-green);
}

.fe-content-detail__document-row.is-uploaded .fe-content-detail__document-state--missing {
  display: none;
}

.fe-content-detail__document-row > strong {
  color: rgba(255, 255, 255, 0.8);
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 450;
  min-width: 0;
}

.fe-content-detail__document-row button {
  background: rgba(245, 200, 66, 0.1);
  border: 1px solid rgba(245, 200, 66, 0.2);
  border-radius: 999px;
  color: var(--fe-content-yellow);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 550;
  min-width: 64px;
  padding: 5px 11px;
}

.fe-content-detail__document-row.is-uploaded button {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.fe-content-detail__delivery {
  min-height: 252px;
}

.fe-content-detail__prerequisites {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.fe-content-detail__prerequisites > span {
  background: rgba(255, 107, 74, 0.1);
  border: 1px solid rgba(255, 107, 74, 0.15);
  border-radius: 999px;
  color: var(--fe-content-orange);
  font-size: 12px;
  font-weight: 550;
  padding: 6px 16px;
}

.fe-content-detail__prerequisites > span.is-done {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.2);
  color: var(--fe-content-green);
}

.fe-content-detail__signoff {
  align-items: center;
  display: flex;
  min-height: 40px;
  margin-bottom: 14px;
}

.fe-content-detail__signoff button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fe-content-detail__signoff button:hover {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--fe-content-green);
}

.fe-content-detail__signoff > span {
  align-items: center;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 999px;
  color: var(--fe-content-green);
  display: inline-flex;
  font-size: 12px;
  font-weight: 550;
  gap: 6px;
  padding: 6px 14px;
}

.fe-content-detail__signoff > span svg {
  height: 13px;
  width: 13px;
}

.fe-content-detail__delivery-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.2);
  display: flex;
  gap: 8px;
  height: 48px;
  justify-content: center;
  width: 100%;
}

.fe-content-detail__delivery-button:disabled {
  cursor: not-allowed;
}

.fe-content-detail__delivery-button.is-ready {
  animation: fe-content-delivery-pulse 2s ease-in-out infinite;
  background: linear-gradient(135deg, var(--fe-content-yellow), var(--fe-content-orange));
  border-color: transparent;
  color: #090909;
}

.fe-content-detail__delivery-button svg {
  height: 16px;
  width: 16px;
}

.fe-content-detail__delivery-button strong {
  font-size: 14px;
  font-weight: 650;
}

.fe-content-detail__destination {
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  font-size: 11px;
  gap: 6px;
  justify-content: center;
  margin-top: 10px !important;
}

.fe-content-detail__destination svg {
  height: 12px;
  width: 12px;
}

.fe-content-detail__delivery-success {
  align-items: center;
  animation: fe-content-success-in 0.4s ease both;
  display: flex;
  flex-direction: column;
  padding: 4px 0 8px;
  text-align: center;
}

.fe-content-detail__delivery-success:focus {
  outline: 0;
}

.fe-content-detail__delivery-success-icon {
  align-items: center;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 50%;
  color: var(--fe-content-green);
  display: flex;
  height: 64px;
  justify-content: center;
  margin-bottom: 16px;
  width: 64px;
}

.fe-content-detail__delivery-success-icon svg {
  height: 28px;
  width: 28px;
}

.fe-content-detail__delivery-success h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 650;
  margin-bottom: 8px;
}

.fe-content-detail__delivery-success p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-bottom: 16px;
}

.fe-content-detail__delivery-success > strong {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 999px;
  color: var(--fe-content-green);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  margin-bottom: 8px;
  padding: 6px 16px;
}

.fe-content-detail__delivery-success > span:not(.fe-content-detail__delivery-success-icon) {
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  font-size: 12px;
  gap: 6px;
  margin-top: 4px;
}

.fe-content-detail__delivery-success > span svg {
  height: 12px;
  width: 12px;
}

.fe-content-detail__modal {
  align-items: center;
  animation: fe-content-modal-fade 0.2s ease both;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 10000;
}

.fe-content-detail__modal > section {
  align-items: center;
  animation: fe-content-modal-rise 0.22s ease both;
  background: rgba(15, 15, 15, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  padding: 40px;
  text-align: center;
  width: 100%;
}

.fe-content-detail__modal > section:focus {
  outline: 0;
}

.fe-content-detail__modal-icon {
  align-items: center;
  background: linear-gradient(135deg, var(--fe-content-yellow), var(--fe-content-orange));
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 72px;
  justify-content: center;
  margin-bottom: 20px;
  width: 72px;
}

.fe-content-detail__modal-icon svg {
  height: 28px;
  width: 28px;
}

.fe-content-detail__modal h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 650;
  margin-bottom: 8px;
}

.fe-content-detail__modal p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px;
}

.fe-content-detail__modal-destination {
  align-items: center;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  font-size: 12px;
  gap: 6px;
  margin-bottom: 24px;
}

.fe-content-detail__modal-destination svg {
  height: 12px;
  width: 12px;
}

.fe-content-detail__modal > section > div {
  display: flex;
  gap: 12px;
}

.fe-content-detail__modal button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  padding: 10px 24px;
}

.fe-content-detail__modal button:last-child {
  background: linear-gradient(135deg, var(--fe-content-yellow), var(--fe-content-orange));
  border: 0;
  color: #090909;
  font-weight: 650;
}

.fe-content-detail__focus-brand,
.fe-content-detail__focus-meta,
.fe-content-detail__focus-progress,
.fe-content-detail__focus-comments-heading,
.fe-content-detail__focus-close {
  display: none;
}

body.fe-content-detail-focus-open,
body.fe-content-detail-modal-open {
  overflow: hidden;
}

body.fe-content-detail-focus-open [data-nav-shell] {
  display: none !important;
}

body.fe-content-detail-focus-open [data-page-transition-shell],
body.fe-content-detail-focus-open [data-page-transition-scope],
body.fe-content-detail-focus-open [data-page-transition-item] {
  transform: none !important;
  will-change: auto !important;
}

.fe-content-detail__review-shell.is-focus-mode {
  animation: fe-content-focus-in 0.3s ease both;
  background: #050505;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: grid !important;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 300px;
  height: 100dvh;
  inset: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  position: fixed !important;
  width: 100vw;
  z-index: 9999;
}

.fe-content-detail__review-shell.is-focus-mode:focus {
  outline: 0;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__focus-brand {
  align-items: center;
  color: rgba(255, 255, 255, 0.52);
  display: flex;
  gap: 8px;
  left: 18px;
  position: fixed;
  top: 25px;
  z-index: 10001;
}

.fe-content-detail__focus-brand > span {
  align-items: center;
  background: linear-gradient(135deg, #f5c842, #ff6b4a);
  border-radius: 50%;
  color: #160b00;
  display: flex;
  font-size: 10px;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.fe-content-detail__focus-brand strong {
  font-size: 12px;
  font-weight: 600;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__focus-meta {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 320px;
  text-align: right;
  top: 26px;
  z-index: 10001;
}

.fe-content-detail__focus-meta strong {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
}

.fe-content-detail__focus-meta span {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  margin-top: 2px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__focus-progress {
  align-items: center;
  background: rgba(5, 5, 5, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  bottom: 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
  color: rgba(255, 255, 255, 0.42);
  display: flex;
  gap: 14px;
  height: 58px;
  left: calc((100vw - 300px) / 2);
  padding: 9px 9px 9px 22px;
  position: fixed;
  transform: translateX(-50%);
  width: 155px;
  z-index: 10002;
}

.fe-content-detail__focus-progress output {
  font-size: 11px;
  white-space: nowrap;
}

.fe-content-detail__focus-progress > span {
  background: rgba(255, 255, 255, 0.1);
  height: 22px;
  width: 1px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__focus-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.fe-content-detail__focus-close svg {
  height: 16px;
  width: 16px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document-column {
  align-items: center;
  display: flex;
  height: 100dvh;
  justify-content: center;
  min-width: 0;
  padding: 40px 48px 82px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document-card {
  background: transparent;
  border: 0;
  height: 100%;
  max-width: 680px;
  padding: 0;
  width: 100%;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document-toolbar,
.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__reading-track {
  display: none;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document {
  background: transparent;
  border: 0;
  border-radius: 0;
  flex: 1 1 auto;
  height: 100%;
  padding: 0;
  scrollbar-width: none;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document::-webkit-scrollbar {
  display: none;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document h1 {
  font-size: 26px;
  margin-bottom: 12px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 20px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__comments {
  align-self: stretch;
  background: #080808;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  height: 100dvh;
  padding: 0;
  width: 300px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__comments-heading {
  display: none;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__focus-comments-heading {
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex: 0 0 80px;
  flex-direction: column;
  gap: 7px;
  padding: 22px 17px 13px;
}

.fe-content-detail__focus-comments-heading h2 {
  color: rgba(255, 255, 255, 0.92);
  display: block;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-content-detail__focus-comments-heading span {
  background: rgba(52, 211, 153, 0.14);
  border-radius: 999px;
  color: #34d399;
  font-size: 10px;
  line-height: 20px;
  padding: 0 10px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__comment-list {
  padding: 18px 16px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__comment {
  background: rgba(255, 255, 255, 0.012);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 15px;
  display: block;
  margin-bottom: 12px;
  min-height: 84px;
  padding: 13px 12px 12px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__comment:hover {
  background: rgba(255, 255, 255, 0.025);
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__avatar {
  display: none;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__comment strong {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  margin-bottom: 8px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__comment p {
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1.55;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__composer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 16px 8px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__composer label {
  font-size: 9px;
  margin-bottom: 7px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__composer > div {
  gap: 8px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__composer input {
  border-radius: 12px;
  font-size: 12px;
  height: 38px;
  padding: 8px 13px;
}

.fe-content-detail__review-shell.is-focus-mode .fe-content-detail__composer button {
  align-self: center;
  background: linear-gradient(135deg, #f5c842, #ff6b4a);
  border-radius: 50%;
  flex-basis: 36px;
  height: 36px;
}

.fe-content-detail :is(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fe-content-green);
  outline-offset: 3px;
}

@keyframes fe-content-glow {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.14); }
}

@keyframes fe-content-stage-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(245, 200, 66, 0); transform: scale(1); }
  50% { box-shadow: 0 0 24px rgba(245, 200, 66, 0.18); transform: scale(1.05); }
}

@keyframes fe-content-delivery-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

@keyframes fe-content-focus-in {
  from { opacity: 0; transform: scale(0.99); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fe-content-review-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fe-content-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fe-content-modal-rise {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fe-content-success-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1480px) {
  .fe-content-detail__workspace {
    max-width: calc(100% - 64px);
  }
}

@media (max-width: 1100px) {
  .fe-content-detail__review-shell {
    flex-direction: column;
  }

  .fe-content-detail__document-column,
  .fe-content-detail__comments {
    flex: 0 0 auto;
    width: 100%;
  }

  .fe-content-detail__comments {
    height: 420px;
  }

  .fe-content-detail__review-shell.is-focus-mode {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__comments {
    height: 100dvh;
    width: 300px;
  }
}

@media (max-width: 767px) {
  .fe-content-detail {
    padding-top: 64px;
  }

  .fe-content-detail__breadcrumb-bar {
    height: 64px;
  }

  .fe-content-detail__breadcrumb-inner {
    gap: 11px;
    padding: 0 16px;
  }

  .fe-content-detail__back {
    flex-basis: 34px;
    height: 34px;
  }

  .fe-content-detail__breadcrumb-inner nav {
    font-size: 12px;
  }

  .fe-content-detail__breadcrumb-inner nav a:first-child,
  .fe-content-detail__breadcrumb-inner nav svg:first-of-type {
    display: none;
  }

  .fe-content-detail__workspace {
    gap: 16px;
    max-width: calc(100% - 28px);
    padding: 24px 0 40px;
  }

  .fe-content-detail__document-card,
  .fe-content-detail__comments,
  .fe-content-detail__section {
    padding: 16px;
  }

  .fe-content-detail__review-actions {
    padding: 16px;
  }

  .fe-content-detail__review-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .fe-content-detail__review-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fe-content-detail__review-file {
    flex: 1 0 100%;
    white-space: normal;
  }

  .fe-content-detail button.fe-content-detail__assign-reviewers {
    margin-left: 0;
  }

  .fe-content-detail__decision-grid {
    grid-template-columns: 1fr;
  }

  .fe-content-detail__review-state footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .fe-content-detail__document-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .fe-content-detail__document-toolbar > div {
    flex-wrap: wrap;
    width: 100%;
  }

  .fe-content-detail__document-toolbar small {
    margin-right: auto;
  }

  .fe-content-detail__document {
    height: 58vh;
    min-height: 380px;
    padding: 20px;
  }

  .fe-content-detail__document h1 {
    font-size: 20px;
  }

  .fe-content-detail__section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .fe-content-detail__section-heading > span {
    text-align: left;
  }

  .fe-content-detail__qc-row {
    grid-template-columns: 16px minmax(0, 1fr) auto;
  }

  .fe-content-detail__qc-value {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .fe-content-detail__status {
    grid-column: 3;
    grid-row: 1;
  }

  .fe-content-detail__pipeline-card {
    padding: 18px 16px;
  }

  .fe-content-detail__documents {
    grid-template-columns: 1fr;
  }

  .fe-content-detail__delivery {
    min-height: 280px;
  }

  .fe-content-detail__modal {
    padding: 16px;
  }

  .fe-content-detail__modal > section {
    padding: 28px 20px;
  }

  .fe-content-detail__modal > section > div {
    flex-direction: column-reverse;
    width: 100%;
  }

  .fe-content-detail__modal button {
    width: 100%;
  }

  .fe-content-detail__review-shell.is-focus-mode {
    display: flex !important;
    flex-direction: column;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document-column {
    flex: 0 0 62vh;
    height: 62vh;
    padding: 62px 12px 8px;
    width: 100%;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document {
    padding: 24px 20px;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document h1 {
    font-size: 22px;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__document p {
    font-size: 14px;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__comments {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex: 1 1 auto;
    height: 38vh;
    padding: 0;
    width: 100%;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__focus-comments-heading {
    flex-basis: 64px;
    padding: 12px 14px 10px;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__comment-list {
    padding: 12px 14px;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__focus-brand {
    left: 14px;
    top: 15px;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__focus-meta {
    display: none;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__focus-progress {
    bottom: calc(38vh + 10px);
    height: 50px;
    left: 50%;
    padding: 7px 7px 7px 18px;
    width: 146px;
  }

  .fe-content-detail__review-shell.is-focus-mode .fe-content-detail__focus-close {
    flex-basis: 34px;
    height: 34px;
    width: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-content-detail *,
  .fe-content-detail *::before,
  .fe-content-detail *::after,
  .fe-content-detail__review-shell.is-focus-mode {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Jupiter dashboard ------------------------------------------------------ */
.fe-jupiter-dashboard {
  --fe-jupiter-card: transparent;
  --fe-jupiter-card-hover: rgba(255, 255, 255, 0.03);
  --fe-jupiter-border: rgba(255, 255, 255, 0.08);
  --fe-jupiter-border-strong: rgba(255, 255, 255, 0.12);
  --fe-jupiter-text: #ffffff;
  --fe-jupiter-muted: rgba(255, 255, 255, 0.4);
  --fe-jupiter-ghost: rgba(255, 255, 255, 0.2);
  color: var(--fe-jupiter-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0 auto;
  max-width: 1400px;
  width: 100%;
}

.fe-jupiter-dashboard *,
.fe-jupiter-dashboard *::before,
.fe-jupiter-dashboard *::after {
  box-sizing: border-box;
}

.fe-jupiter-dashboard button,
.fe-jupiter-dashboard input {
  font-family: inherit;
}

.fe-jupiter-dashboard__hero {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 32px;
}

.fe-jupiter-dashboard__greeting {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.fe-jupiter-dashboard__avatar {
  align-items: center;
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-radius: 999px;
  color: #111111;
  display: inline-flex;
  flex: 0 0 40px;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.fe-jupiter-dashboard__title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
}

.fe-jupiter-dashboard__subtitle {
  color: var(--fe-jupiter-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}

.fe-jupiter-dashboard .fe-jupiter-dashboard__cta {
  align-items: center;
  appearance: none;
  background: #ff6b4a;
  border: 0;
  border-radius: 999px;
  color: #000000;
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  line-height: 20px;
  min-height: 40px;
  padding: 10px 20px;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.fe-jupiter-dashboard .fe-jupiter-dashboard__cta:hover {
  background: #ff6b4a;
  color: #000000;
  opacity: 0.88;
  transform: none;
}

.fe-jupiter-dashboard .fe-jupiter-dashboard__cta:focus-visible,
.fe-jupiter-widget:focus-visible,
.fe-jupiter-review-card:focus-visible,
.fe-jupiter-media-card:focus-visible,
.fe-jupiter-signals__row:focus-visible,
.fe-jupiter-notification:focus-visible,
.fe-jupiter-library-tab:focus-visible {
  outline: 2px solid rgba(245, 200, 66, 0.75);
  outline-offset: 3px;
}

.fe-jupiter-dashboard__hero[data-page-transition-static] {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.fe-jupiter-dashboard__bento {
  display: grid;
  gap: 12px;
  grid-template-areas:
    "review review review"
    "pipeline agent signals"
    "library library notifications";
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.fe-jupiter-widget {
  background: var(--fe-jupiter-card);
  border: 1px solid var(--fe-jupiter-border);
  border-radius: 16px;
  color: inherit;
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  text-decoration: none;
  transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.fe-jupiter-widget:hover,
.fe-jupiter-widget:focus-within {
  background: var(--fe-jupiter-card-hover);
  border-color: var(--fe-jupiter-border-strong);
}

.fe-jupiter-widget--review {
  grid-area: review;
  min-height: 188px;
  padding: 16px 20px;
}

.fe-jupiter-widget--review:hover,
.fe-jupiter-widget--library:hover {
  transform: scale(1.01);
}

.fe-jupiter-widget--pipeline,
.fe-jupiter-widget--signals,
.fe-jupiter-widget--notifications {
  min-height: 348px;
}

.fe-jupiter-widget--pipeline { grid-area: pipeline; }
.fe-jupiter-widget--signals { grid-area: signals; }

.fe-jupiter-widget--pipeline:hover,
.fe-jupiter-widget--signals:hover,
.fe-jupiter-widget--notifications:hover {
  transform: scale(1.02);
}

.fe-jupiter-widget--library {
  grid-area: library;
  min-height: 326px;
  padding: 16px 20px;
}

.fe-jupiter-widget--notifications {
  grid-area: notifications;
  min-height: 326px;
}

.fe-jupiter-widget__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  min-height: 18px;
}

.fe-jupiter-widget__heading-link {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: 400;
  gap: 8px;
  letter-spacing: 0.08em;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 300ms ease;
}

.fe-jupiter-widget__heading-link svg {
  color: rgba(255, 255, 255, 0.3);
  flex: 0 0 16px;
  height: 16px;
  transition: color 300ms ease;
  width: 16px;
}

.fe-jupiter-widget:hover .fe-jupiter-widget__heading-link svg,
.fe-jupiter-widget:focus-within .fe-jupiter-widget__heading-link svg {
  color: #f5c842;
}

.fe-jupiter-widget--ba-flags:hover .fe-jupiter-widget__heading-link svg,
.fe-jupiter-widget--ba-flags:focus-within .fe-jupiter-widget__heading-link svg {
  color: #ef4444;
}

.fe-jupiter-widget:hover .fe-jupiter-widget__heading-link > span,
.fe-jupiter-widget:focus-within .fe-jupiter-widget__heading-link > span {
  color: rgba(255, 255, 255, 0.62);
}

.fe-jupiter-widget__meta {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  font-weight: 400;
  transition: color 300ms ease;
}

.fe-jupiter-review-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fe-jupiter-review-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  color: inherit;
  display: flex;
  flex-direction: column;
  min-height: 122px;
  padding: 14px 16px;
  position: relative;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease;
}

.fe-jupiter-review-card:hover,
.fe-jupiter-review-card:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(245, 200, 66, 0.2);
}

.fe-jupiter-review-card__urgent {
  background: #ef4444;
  border-radius: 999px;
  height: 6px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 6px;
}

.fe-jupiter-type-pill {
  align-self: flex-start;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  padding: 1px 8px;
}

.fe-jupiter-type-pill--video { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.fe-jupiter-type-pill--audio { background: rgba(6, 182, 212, 0.12); color: #06b6d4; }
.fe-jupiter-type-pill--artwork { background: rgba(245, 200, 66, 0.12); color: #f5c842; }

.fe-jupiter-review-card > strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-jupiter-review-card > small {
  color: var(--fe-jupiter-muted);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-jupiter-review-card__footer {
  align-items: center;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
}

.fe-jupiter-review-card__footer svg { height: 12px; width: 12px; }

.fe-jupiter-pipeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fe-jupiter-pipeline__row {
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  padding: 6px 0;
  transition: color 300ms ease;
}

.fe-jupiter-widget--pipeline:hover .fe-jupiter-pipeline__row { color: rgba(255, 255, 255, 0.8); }

.fe-jupiter-pipeline__row strong {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 600;
  min-width: 28px;
  padding: 2px 10px;
  text-align: center;
  transition: background 300ms ease, color 300ms ease;
}

.fe-jupiter-pipeline__track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1px;
  display: block;
  height: 1px;
  overflow: hidden;
}

.fe-jupiter-pipeline__track > span {
  background: rgba(255, 255, 255, 0.1);
  display: block;
  height: 100%;
  transition: background 300ms ease;
  width: var(--fe-jupiter-progress);
}

.fe-jupiter-widget--pipeline:hover .fe-jupiter-tone--gold { --fe-jupiter-tone: #f5c842; }
.fe-jupiter-widget--pipeline:hover .fe-jupiter-tone--cyan { --fe-jupiter-tone: #06b6d4; }
.fe-jupiter-widget--pipeline:hover .fe-jupiter-tone--mint { --fe-jupiter-tone: #34d399; }
.fe-jupiter-widget--pipeline:hover .fe-jupiter-tone--orange { --fe-jupiter-tone: #fb923c; }
.fe-jupiter-widget--pipeline:hover .fe-jupiter-tone--red { --fe-jupiter-tone: #ef4444; }
.fe-jupiter-widget--pipeline:hover .fe-jupiter-tone--violet { --fe-jupiter-tone: #a78bfa; }
.fe-jupiter-widget--pipeline:hover .fe-jupiter-tone--coral { --fe-jupiter-tone: #ff6b4a; }

.fe-jupiter-widget--pipeline:hover .fe-jupiter-pipeline__row strong {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fe-jupiter-tone);
}

.fe-jupiter-widget--pipeline:hover .fe-jupiter-pipeline__track > span { background: var(--fe-jupiter-tone); opacity: 0.4; }

.fe-jupiter-agent-wrap {
  align-items: center;
  display: flex;
  grid-area: agent;
  justify-content: center;
  min-height: 348px;
  overflow: visible;
}

.fe-jupiter-agent-group { cursor: pointer; position: relative; z-index: 2; }

.fe-jupiter-agent {
  animation: fe-jupiter-agent-float 4s ease-in-out infinite;
  background: linear-gradient(135deg, #f5c842 0%, #ff6b4a 100%);
  border-radius: 999px;
  box-shadow: 0 0 60px rgba(245, 200, 66, 0.4), 0 0 120px rgba(255, 107, 74, 0.2);
  height: 140px;
  position: relative;
  transition: box-shadow 300ms ease, transform 300ms ease;
  width: 140px;
}

.fe-jupiter-agent-group:hover .fe-jupiter-agent,
.fe-jupiter-agent-group:focus-within .fe-jupiter-agent {
  box-shadow: 0 0 100px rgba(245, 200, 66, 0.7), 0 0 160px rgba(255, 107, 74, 0.4);
  transform: scale(1.05);
}

.fe-jupiter-agent__eyes {
  display: flex;
  gap: 22px;
  left: 50%;
  position: absolute;
  top: 40px;
  transform: translateX(-50%);
}
.fe-jupiter-agent__eyes i { background: #111111; border-radius: 999px; display: block; height: 13px; width: 13px; }
.fe-jupiter-agent__mouth {
  background: #111111;
  border-radius: 0 0 66px 66px;
  height: 33px;
  left: 50%;
  position: absolute;
  top: 63px;
  transform: translateX(-50%);
  width: 66px;
}

.fe-jupiter-agent-bubble {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  bottom: calc(100% + 12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  color: #111111;
  left: 50%;
  opacity: 0;
  padding: 16px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 8px) scale(0.95);
  transition: opacity 220ms ease, transform 220ms ease;
  width: 256px;
  z-index: 3;
}

.fe-jupiter-agent-group:hover .fe-jupiter-agent-bubble,
.fe-jupiter-agent-group:focus-within .fe-jupiter-agent-bubble { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.fe-jupiter-agent-bubble__heading { color: rgba(0, 0, 0, 0.9); font-size: 12px; font-weight: 600; line-height: 1.4; margin: 0 0 4px; }
.fe-jupiter-agent-bubble__copy { color: rgba(0, 0, 0, 0.6); font-size: 12px; line-height: 1.4; margin: 0 0 12px; }

.fe-jupiter-agent-input-shell {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  height: 34px;
  position: relative;
}

.fe-jupiter-dashboard .fe-jupiter-agent-input {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: #111111;
  font-size: 12px;
  height: 100%;
  outline: none;
  padding: 7px 38px 7px 10px;
  width: 100%;
}

.fe-jupiter-dashboard .fe-jupiter-agent-input:focus { border: 0; box-shadow: 0 0 0 2px rgba(245, 200, 66, 0.3); }

.fe-jupiter-dashboard .fe-jupiter-agent-send {
  align-items: center;
  appearance: none;
  background: #f5c842;
  border: 0;
  border-radius: 7px;
  color: #111111;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 5px;
  top: 4px;
  width: 24px;
}

.fe-jupiter-agent-send svg { height: 14px; width: 14px; }
.fe-jupiter-agent-bubble__link { color: #7a4f00; font-size: 12px; font-weight: 600; }
.fe-jupiter-agent-bubble__tail { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid rgba(255, 255, 255, 0.9); bottom: -9px; height: 0; left: 50%; position: absolute; transform: translateX(-50%); width: 0; }

.fe-jupiter-signals__count { color: var(--fe-jupiter-muted); font-size: 24px; font-weight: 600; line-height: 1; margin: 0 0 16px; transition: color 300ms ease; }
.fe-jupiter-widget--signals:hover .fe-jupiter-signals__count { color: #ff6b4a; }
.fe-jupiter-signals__list { display: flex; flex-direction: column; gap: 10px; }

.fe-jupiter-signals__row {
  align-items: center;
  color: var(--fe-jupiter-muted);
  display: flex;
  font-size: 13px;
  font-weight: 500;
  gap: 12px;
  justify-content: space-between;
  min-height: 21px;
  text-decoration: none;
  transition: color 300ms ease;
}

.fe-jupiter-widget--signals:hover .fe-jupiter-signals__row { color: rgba(255, 255, 255, 0.82); }
.fe-jupiter-signals__row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fe-jupiter-signals__pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--fe-jupiter-border);
  border-radius: 999px;
  color: var(--fe-jupiter-muted);
  flex: none;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}

.fe-jupiter-widget--signals:hover .fe-jupiter-signals__pill { background: rgba(255, 107, 74, 0.12); border-color: rgba(255, 107, 74, 0.2); color: #ff6b4a; }

.fe-jupiter-library__header { margin-bottom: 16px; }
.fe-jupiter-library-tabs { display: flex; gap: 6px; }

.fe-jupiter-dashboard .fe-jupiter-library-tab {
  align-items: center;
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: flex;
  height: 22px;
  justify-content: center;
  padding: 4px 10px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.fe-jupiter-library-tab svg { height: 11px; width: 11px; }
.fe-jupiter-library-tab--audio.is-active { background: rgba(6, 182, 212, 0.12); border-color: rgba(6, 182, 212, 0.2); color: #06b6d4; }
.fe-jupiter-library-tab--video.is-active { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.2); color: #a78bfa; }
.fe-jupiter-library-tab--artwork.is-active { background: rgba(245, 200, 66, 0.12); border-color: rgba(245, 200, 66, 0.2); color: #f5c842; }
.fe-jupiter-library-tab--content.is-active { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.2); color: #34d399; }
.fe-jupiter-library-panel[hidden] { display: none !important; }

.fe-jupiter-media-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fe-jupiter-media-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--fe-jupiter-border);
  border-radius: 12px;
  color: inherit;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease;
}

.fe-jupiter-media-card:hover,
.fe-jupiter-media-card:focus-within { background: rgba(255, 255, 255, 0.06); border-color: var(--fe-jupiter-border-strong); }

.fe-jupiter-media-card__visual {
  align-items: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.65));
  display: flex;
  flex: none;
  height: 140px;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.fe-jupiter-cover--sunrise .fe-jupiter-media-card__visual { background: linear-gradient(135deg, rgba(245, 200, 66, 0.26), rgba(0, 0, 0, 0.68)); }
.fe-jupiter-cover--violet .fe-jupiter-media-card__visual { background: linear-gradient(135deg, rgba(167, 139, 250, 0.24), rgba(0, 0, 0, 0.68)); }
.fe-jupiter-cover--ocean .fe-jupiter-media-card__visual { background: linear-gradient(135deg, rgba(6, 182, 212, 0.24), rgba(0, 0, 0, 0.68)); }
.fe-jupiter-cover--mint .fe-jupiter-media-card__visual { background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(0, 0, 0, 0.68)); }
.fe-jupiter-cover--ember .fe-jupiter-media-card__visual { background: linear-gradient(135deg, rgba(255, 107, 74, 0.24), rgba(0, 0, 0, 0.68)); }
.fe-jupiter-media-card--video .fe-jupiter-media-card__visual { background: linear-gradient(145deg, rgba(167, 139, 250, 0.16), rgba(0, 0, 0, 0.82)); }
.fe-jupiter-media-card--artwork .fe-jupiter-media-card__visual { background: linear-gradient(145deg, rgba(245, 200, 66, 0.16), rgba(0, 0, 0, 0.82)); }

.fe-jupiter-media-card__image {
  display: block;
  filter: grayscale(0.82) saturate(0.55) brightness(0.58);
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: filter 400ms ease;
  width: 100%;
}

.fe-jupiter-widget--library:hover .fe-jupiter-media-card__image,
.fe-jupiter-widget--library:focus-within .fe-jupiter-media-card__image { filter: grayscale(0) saturate(1) brightness(1); }

.fe-jupiter-media-card__waveform { inset: 14px; opacity: 0.42; position: absolute; z-index: 1; }

.fe-jupiter-dashboard .fe-jupiter-media-card__play,
.fe-jupiter-media-card__type-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  height: 60px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  position: relative;
  transition: opacity 300ms ease, transform 200ms ease;
  width: 60px;
  z-index: 2;
}

.fe-jupiter-media-card__type-icon { background: rgba(167, 139, 250, 0.2); border-color: rgba(167, 139, 250, 0.4); color: #a78bfa; height: 36px; opacity: 1; width: 36px; }
.fe-jupiter-media-card--artwork .fe-jupiter-media-card__type-icon { background: rgba(245, 200, 66, 0.16); border-color: rgba(245, 200, 66, 0.3); color: #f5c842; opacity: 0; }

.fe-jupiter-media-card:hover .fe-jupiter-media-card__play,
.fe-jupiter-media-card:focus-within .fe-jupiter-media-card__play,
.fe-jupiter-media-card__play[data-state="playing"],
.fe-jupiter-media-card--artwork:hover .fe-jupiter-media-card__type-icon { opacity: 1; }

.fe-jupiter-media-card__play:hover { transform: scale(1.06); }
.fe-jupiter-media-card__play:disabled { cursor: default; }
.fe-jupiter-media-card__play svg { height: 20px; width: 20px; }
.fe-jupiter-media-card__type-icon svg { height: 16px; width: 16px; }
.fe-jupiter-media-card__copy { display: block; min-width: 0; padding: 8px 10px; }

.fe-jupiter-media-card__title {
  color: rgba(255, 255, 255, 0.35);
  display: block;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: color 300ms ease;
  white-space: nowrap;
}

.fe-jupiter-media-card__copy p,
.fe-jupiter-media-card__copy small {
  color: rgba(255, 255, 255, 0.2);
  display: block;
  font-size: 10px;
  font-weight: 400;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 300ms ease;
  white-space: nowrap;
}

.fe-jupiter-widget--library:hover .fe-jupiter-media-card__title,
.fe-jupiter-widget--library:focus-within .fe-jupiter-media-card__title { color: rgba(255, 255, 255, 0.9); }

.fe-jupiter-widget--library:hover .fe-jupiter-media-card__copy p,
.fe-jupiter-widget--library:hover .fe-jupiter-media-card__copy small,
.fe-jupiter-widget--library:focus-within .fe-jupiter-media-card__copy p,
.fe-jupiter-widget--library:focus-within .fe-jupiter-media-card__copy small { color: rgba(255, 255, 255, 0.4); }

.fe-jupiter-notifications__header { justify-content: flex-start; }

.fe-jupiter-notifications__badge {
  align-items: center;
  background: #ef4444;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  margin-left: 2px;
  min-width: 16px;
  padding: 0 4px;
}

.fe-jupiter-notifications__list { display: flex; flex: 1; flex-direction: column; gap: 8px; }

.fe-jupiter-dashboard .fe-jupiter-notification {
  align-items: flex-start;
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
  text-decoration: none;
  transition: background 150ms ease;
  width: 100%;
}

.fe-jupiter-dashboard .fe-jupiter-notification.is-unread { background: rgba(245, 200, 66, 0.03); border-left-color: #f5c842; }
.fe-jupiter-dashboard .fe-jupiter-notification:hover { background: rgba(255, 255, 255, 0.04); }

.fe-jupiter-notification__icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #f5c842;
  display: flex;
  flex: 0 0 28px;
  height: 28px;
  justify-content: center;
}

.fe-jupiter-notification[data-tone="danger"] .fe-jupiter-notification__icon { color: #ef4444; }
.fe-jupiter-notification[data-tone="warning"] .fe-jupiter-notification__icon { color: #fb923c; }
.fe-jupiter-notification[data-tone="success"] .fe-jupiter-notification__icon { color: #34d399; }
.fe-jupiter-notification__icon svg { height: 12px; width: 12px; }
.fe-jupiter-notification__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fe-jupiter-notification__copy strong { color: rgba(255, 255, 255, 0.5); font-size: 12px; font-weight: 400; line-height: 1.4; }
.fe-jupiter-notification.is-unread .fe-jupiter-notification__copy strong { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
.fe-jupiter-notification__copy small { color: rgba(255, 255, 255, 0.3); font-size: 10px; margin-top: 2px; }

.fe-jupiter-notifications__footer {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 8px;
}

.fe-jupiter-dashboard .fe-jupiter-notifications__footer .fe-jupiter-notifications__view-all {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  transition: color 150ms ease;
}

.fe-jupiter-widget--notifications:hover .fe-jupiter-notifications__footer .fe-jupiter-notifications__view-all,
.fe-jupiter-notifications__view-all:hover,
.fe-jupiter-notifications__view-all:focus-visible { color: rgba(255, 255, 255, 0.6); }
.fe-jupiter-notifications__footer > span { color: #f5c842; font-size: 11px; }

.fe-jupiter-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 186px;
  text-align: center;
}

.fe-jupiter-empty--review { min-height: 122px; }
.fe-jupiter-empty--compact { align-items: flex-start; min-height: 80px; text-align: left; }
.fe-jupiter-empty p { color: var(--fe-jupiter-muted); font-size: 13px; margin: 0; }
.fe-jupiter-empty span { color: var(--fe-jupiter-ghost); font-size: 11px; margin-top: 4px; }

@keyframes fe-jupiter-agent-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 1100px) {
  .fe-jupiter-dashboard__bento {
    grid-template-areas:
      "review review"
      "pipeline signals"
      "agent agent"
      "library library"
      "notifications notifications";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fe-jupiter-agent-wrap { min-height: 260px; padding-top: 88px; }
}

@media (max-width: 720px) {
  .fe-jupiter-dashboard__hero { align-items: flex-start; flex-direction: column; }
  .fe-jupiter-dashboard__title { font-size: 21px; }
  .fe-jupiter-dashboard__bento {
    grid-template-areas: "review" "pipeline" "agent" "signals" "library" "notifications";
    grid-template-columns: minmax(0, 1fr);
  }

  .fe-jupiter-review-grid,
  .fe-jupiter-media-grid { grid-template-columns: minmax(0, 1fr); }

  .fe-jupiter-widget--pipeline,
  .fe-jupiter-widget--signals,
  .fe-jupiter-widget--notifications,
  .fe-jupiter-widget--library { min-height: 0; }

  .fe-jupiter-agent-wrap { min-height: 288px; padding-top: 112px; }
  .fe-jupiter-media-card__visual { height: 180px; }
}

@media (max-width: 520px) {
  .fe-dashboard-shell .fe-dashboard-main { padding-left: 16px; padding-right: 16px; }
  .fe-jupiter-widget--review,
  .fe-jupiter-widget--library { padding-left: 16px; padding-right: 16px; }
  .fe-jupiter-library__header { align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fe-jupiter-dashboard *,
  .fe-jupiter-dashboard *::before,
  .fe-jupiter-dashboard *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .fe-jupiter-widget:hover,
  .fe-jupiter-agent-group:hover .fe-jupiter-agent,
  .fe-jupiter-agent-group:focus-within .fe-jupiter-agent { transform: none; }
}

/* Full notifications inbox ------------------------------------------------ */
.fe-projects-shell .fe-notifications-main {
  max-width: none;
  min-height: 100vh;
  padding: 112px 32px 64px;
}

.fe-notifications-page {
  color: #ffffff;
  font-family: var(--font-fe-ui);
  margin: 0 auto;
  max-width: 1400px;
  width: 100%;
}

.fe-notifications-page__header {
  align-items: flex-end;
  animation: fe-notifications-page-enter 200ms ease both;
  display: flex;
  justify-content: space-between;
  min-height: 92px;
}

.fe-notifications-page__eyebrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.fe-notifications-page h1 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.fe-notifications-page__count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  margin: 8px 0 0;
}

.fe-notifications-page__mark-all-form {
  flex: 0 0 auto;
  margin: 0 0 1px 24px;
}

.fe-notifications-page__mark-all {
  align-items: center;
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  min-height: 42px;
  padding: 10px 24px;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.fe-notifications-page__mark-all:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.fe-notifications-page__mark-all:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.fe-notifications-page__mark-all:disabled:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
}

.fe-notifications-page__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 64px;
}

.fe-notifications-page-row {
  align-items: center;
  animation: fe-notifications-page-enter 200ms ease both;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  display: flex;
  gap: 16px;
  min-height: 82px;
  overflow: hidden;
  padding: 16px 18px;
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
}

.fe-notifications-page-row:nth-child(2) { animation-delay: 40ms; }
.fe-notifications-page-row:nth-child(3) { animation-delay: 80ms; }
.fe-notifications-page-row:nth-child(4) { animation-delay: 120ms; }
.fe-notifications-page-row:nth-child(n + 5) { animation-delay: 160ms; }

.fe-notifications-page-row::before {
  background: #f5c842;
  bottom: -1px;
  content: "";
  left: -1px;
  opacity: 0;
  position: absolute;
  top: -1px;
  transition: opacity 200ms ease;
  width: 3px;
}

.fe-notifications-page-row:hover,
.fe-notifications-page-row:focus-within {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.fe-notifications-page-row.is-unread:hover::before,
.fe-notifications-page-row.is-unread:focus-within::before {
  opacity: 1;
}

.fe-notifications-page-row__icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.35);
  display: inline-flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  width: 40px;
}

.fe-notifications-page-row.is-unread .fe-notifications-page-row__icon {
  background: rgba(245, 200, 66, 0.15);
  border-color: rgba(245, 200, 66, 0.12);
  color: #f5c842;
}

.fe-notifications-page-row.is-unread:hover .fe-notifications-page-row__icon,
.fe-notifications-page-row.is-unread:focus-within .fe-notifications-page-row__icon {
  background: linear-gradient(135deg, rgba(245, 200, 66, 0.22), rgba(255, 107, 74, 0.22));
  border-color: rgba(245, 200, 66, 0.2);
}

.fe-notifications-page-row.is-read:hover .fe-notifications-page-row__icon,
.fe-notifications-page-row.is-read:focus-within .fe-notifications-page-row__icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.fe-notifications-page-row__icon svg {
  height: 18px;
  width: 18px;
}

.fe-notifications-page-row__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.fe-notifications-page-row__title-line {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.fe-notifications-page-row__title-line h2 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}

.fe-notifications-page-row.is-unread .fe-notifications-page-row__title-line h2 {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.fe-notifications-page-row:hover .fe-notifications-page-row__title-line h2,
.fe-notifications-page-row:focus-within .fe-notifications-page-row__title-line h2 {
  color: #ffffff;
}

.fe-notifications-page-row__unread-dot {
  background: #f5c842;
  border-radius: 50%;
  flex: 0 0 7px;
  height: 7px;
  width: 7px;
}

.fe-notifications-page-row__meta {
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 400;
  gap: 7px;
  line-height: 1.35;
  margin: 6px 0 0;
}

.fe-notifications-page-row__meta > span:first-child {
  color: rgba(255, 255, 255, 0.4);
}

.fe-notifications-page-row__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
  justify-content: flex-end;
  margin-left: 16px;
}

.fe-notifications-page-row__mark-read-form {
  margin: 0;
}

.fe-notifications-page-row__action,
.fe-notifications-page-row__mark-read {
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  justify-content: center;
  line-height: 1.2;
  min-height: 38px;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  white-space: nowrap;
}

.fe-notifications-page-row__action {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.45);
  min-width: 108px;
  padding: 9px 16px;
}

.fe-notifications-page-row__mark-read {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.45);
  padding: 9px 10px;
}

.fe-notifications-page-row:hover .fe-notifications-page-row__action,
.fe-notifications-page-row:focus-within .fe-notifications-page-row__action,
.fe-notifications-page-row__action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.fe-notifications-page-row:hover .fe-notifications-page-row__mark-read,
.fe-notifications-page-row:focus-within .fe-notifications-page-row__mark-read,
.fe-notifications-page-row__mark-read:hover {
  color: rgba(255, 255, 255, 0.8);
}

.fe-notifications-page__mark-all:focus-visible,
.fe-notifications-page-row__action:focus-visible,
.fe-notifications-page-row__mark-read:focus-visible,
.fe-notifications-page__pagination a:focus-visible {
  outline: 2px solid #f5c842;
  outline-offset: 3px;
}

.fe-notifications-page__empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
  text-align: center;
}

.fe-notifications-page__empty-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.3);
  display: inline-flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.fe-notifications-page__empty-icon svg { height: 20px; width: 20px; }
.fe-notifications-page__empty h2 { color: rgba(255, 255, 255, 0.9); font-size: 17px; font-weight: 600; margin: 16px 0 0; }
.fe-notifications-page__empty p { color: rgba(255, 255, 255, 0.4); font-size: 13px; margin: 6px 0 0; }

.fe-notifications-page__pagination {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.fe-notifications-page__pagination .pagination {
  align-items: center;
  display: flex;
  gap: 6px;
}

.fe-notifications-page__pagination .page,
.fe-notifications-page__pagination .next,
.fe-notifications-page__pagination .prev,
.fe-notifications-page__pagination .first,
.fe-notifications-page__pagination .last {
  display: inline-flex;
}

.fe-notifications-page__pagination a,
.fe-notifications-page__pagination .current {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  display: inline-flex;
  font-size: 12px;
  height: 34px;
  justify-content: center;
  min-width: 34px;
  padding: 0 10px;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.fe-notifications-page__pagination a:hover,
.fe-notifications-page__pagination .current {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.3);
  color: #f5c842;
}

@keyframes fe-notifications-page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .fe-projects-shell .fe-notifications-main { padding: 96px 16px 40px; }
  .fe-notifications-page__header { align-items: flex-start; flex-direction: column; gap: 24px; }
  .fe-notifications-page__mark-all-form { margin: 0; }
  .fe-notifications-page__list { margin-top: 40px; }
  .fe-notifications-page-row { align-items: flex-start; flex-wrap: wrap; padding: 16px; }
  .fe-notifications-page-row__copy { flex-basis: calc(100% - 56px); }
  .fe-notifications-page-row__actions { justify-content: flex-start; margin: 0 0 0 56px; width: calc(100% - 56px); }
}

@media (max-width: 480px) {
  .fe-notifications-page-row__actions { align-items: stretch; flex-direction: column; gap: 6px; }
  .fe-notifications-page-row__action,
  .fe-notifications-page-row__mark-read { width: 100%; }
  .fe-notifications-page__pagination .first,
  .fe-notifications-page__pagination .last { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fe-notifications-page *,
  .fe-notifications-page *::before,
  .fe-notifications-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Project overview: Team & Permissions modal */
.fe-projects-index-team-modal {
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.85);
  inset: 0;
  min-height: 100dvh;
  padding: 24px;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

.fe-projects-index-team-panel {
  background: rgba(15, 15, 15, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.66);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
  transform: translateY(14px) scale(0.97);
  width: min(560px, calc(100vw - 48px));
}

.fe-projects-index-team-modal.is-open .fe-projects-index-team-panel {
  transform: translateY(0) scale(1);
}

.fe-projects-index-team-header {
  align-items: center;
  flex: 0 0 auto;
  padding: 24px 28px;
}

.fe-projects-index-team-header h2 {
  font-family: var(--font-fe-ui);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.fe-projects-index-team-header p {
  font-size: 12px;
  margin-top: 4px;
}

.fe-projects-index-team-modal button.fe-projects-index-team-close {
  flex-basis: 30px;
  padding: 0;
}

.fe-projects-index-team-close svg {
  height: 18px;
  width: 18px;
}

.fe-projects-index-team-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 28px;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  scrollbar-width: thin;
}

.fe-projects-index-team-body::-webkit-scrollbar {
  width: 7px;
}

.fe-projects-index-team-body::-webkit-scrollbar-track {
  background: transparent;
}

.fe-projects-index-team-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.fe-projects-index-team-invite h3,
.fe-projects-index-team-legend h3,
.fe-projects-index-team-current h3 {
  color: rgba(255, 255, 255, 0.34);
  font-family: var(--font-fe-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  margin: 0 0 13px;
  text-transform: uppercase;
}

.fe-projects-index-team-invite__primary,
.fe-projects-index-team-invite__secondary {
  display: grid;
  gap: 10px;
}

.fe-projects-index-team-invite__primary {
  grid-template-columns: minmax(0, 1fr) 110px;
}

.fe-projects-index-team-invite__secondary {
  grid-template-columns: minmax(0, 1fr) 140px;
  margin-top: 8px;
}

.fe-projects-index-team-modal input,
.fe-projects-index-team-modal select {
  appearance: none;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-fe-ui);
  font-size: 13px;
  height: 44px;
  min-width: 0;
  outline: none;
  padding: 0 14px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
  width: 100%;
}

.fe-projects-index-team-modal select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%23787878' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 11px center;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.fe-projects-index-team-modal input::placeholder {
  color: rgba(255, 255, 255, 0.33);
}

.fe-projects-index-team-modal input:hover,
.fe-projects-index-team-modal select:hover {
  background-color: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.16);
}

.fe-projects-index-team-modal input:focus-visible,
.fe-projects-index-team-modal select:focus-visible,
.fe-projects-index-team-modal button:focus-visible {
  border-color: rgba(245, 200, 66, 0.7);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.12);
  outline: none;
}

.fe-projects-index-team-modal .fe-projects-index-team-permission-select {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px !important;
  background-clip: padding-box;
  box-shadow: none;
  display: inline-flex;
  isolation: isolate;
  min-height: 44px;
  padding: 0;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  width: 100%;
  z-index: 20;
}

.fe-projects-shell .fe-projects-index-team-modal .fe-projects-index-team-permission-select--invite {
  height: 44px;
  min-height: 44px;
  width: 140px;
}

.fe-projects-shell .fe-projects-index-team-modal .fe-projects-index-team-permission-select--invite button.fe-themed-select-trigger {
  border-radius: 11px !important;
  font-size: 14px;
  height: 42px;
  min-height: 42px;
}

.fe-projects-index-team-modal .fe-projects-index-team-permission-select:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.16);
}

.fe-projects-index-team-modal .fe-projects-index-team-permission-select:focus-within,
.fe-projects-index-team-modal .fe-projects-index-team-permission-select.is-open {
  border-color: rgba(245, 200, 66, 0.7);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.12);
  z-index: 160;
}

.fe-projects-index-team-modal .fe-projects-index-team-permission-select::after {
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.38);
  border-right: 1.5px solid rgba(255, 255, 255, 0.38);
  content: "";
  height: 7px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-65%) rotate(45deg);
  transition: border-color 160ms ease, transform 160ms ease;
  width: 7px;
}

.fe-projects-index-team-modal .fe-projects-index-team-permission-select.is-open::after {
  border-color: #f5c842;
  transform: translateY(-35%) rotate(225deg);
}

.fe-projects-index-team-modal button.fe-themed-select-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 11px !important;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  display: flex;
  font-family: var(--font-fe-ui);
  font-size: 13px;
  height: 42px;
  justify-content: flex-start;
  min-height: 0;
  overflow: hidden;
  padding: 0 36px 0 14px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.fe-projects-index-team-modal button.fe-themed-select-trigger:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.fe-projects-index-team-modal select.fe-themed-select-native {
  height: 1px;
  left: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 1px;
}

.fe-projects-index-team-modal .fe-projects-index-team-permission-select .fe-themed-select-menu {
  background: rgba(18, 18, 18, 0.99);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(245, 200, 66, 0.04);
  left: -1px;
  margin-top: 6px;
  max-height: 190px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5px;
  position: absolute;
  right: -1px;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  scrollbar-width: thin;
  top: 100%;
  z-index: 180;
}

.fe-projects-index-team-modal .fe-projects-index-team-permission-select .fe-themed-select-menu::-webkit-scrollbar {
  width: 6px;
}

.fe-projects-index-team-modal .fe-projects-index-team-permission-select .fe-themed-select-menu::-webkit-scrollbar-track {
  background: transparent;
}

.fe-projects-index-team-modal .fe-projects-index-team-permission-select .fe-themed-select-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.fe-projects-index-team-modal button.fe-themed-select-option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  display: flex;
  font-family: var(--font-fe-ui);
  font-size: 12px;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 10px;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
  width: 100%;
}

.fe-projects-index-team-modal button.fe-themed-select-option + button.fe-themed-select-option {
  border-top: 0;
}

.fe-projects-index-team-modal button.fe-themed-select-option:hover,
.fe-projects-index-team-modal button.fe-themed-select-option:focus-visible {
  background: rgba(255, 255, 255, 0.065);
  box-shadow: none;
  color: #fff;
}

.fe-projects-index-team-modal button.fe-themed-select-option.is-selected {
  background: rgba(245, 200, 66, 0.1);
  color: #f5c842;
  font-weight: 600;
}

.fe-projects-index-team-modal button.fe-themed-select-option.is-selected::after {
  color: #f5c842;
  content: "✓";
  font-size: 11px;
}

.fe-projects-index-team-modal button.fe-projects-index-team-invite-button {
  background: linear-gradient(105deg, #ffc343 0%, #ff704f 100%);
  border: 0;
  border-radius: 11px;
  color: #090909;
  cursor: pointer;
  font-family: var(--font-fe-ui);
  font-size: 12px;
  font-weight: 650;
  min-height: 44px;
  padding: 0 14px;
  transition: filter 160ms ease, transform 160ms ease;
}

.fe-projects-index-team-modal button.fe-projects-index-team-invite-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.fe-projects-index-team-legend {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-top: 14px;
  padding: 14px;
}

.fe-projects-index-team-legend h3 {
  margin-bottom: 9px;
}

.fe-projects-index-team-legend dl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0;
}

.fe-projects-index-team-legend dl > div {
  align-items: baseline;
  display: flex;
  gap: 6px;
}

.fe-projects-index-team-legend dt {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 600;
}

.fe-projects-index-team-legend dd {
  color: rgba(255, 255, 255, 0.31);
  font-size: 10px;
  margin: 0;
}

.fe-projects-index-team-divider {
  background: rgba(255, 255, 255, 0.07);
  height: 1px;
  margin: 20px 0;
}

.fe-projects-index-team-roster {
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.fe-projects-index-team-member {
  align-items: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: 36px minmax(0, 1fr) 80px 28px;
  min-height: 82px;
  padding: 11px 12px 11px 14px;
  transition: background 160ms ease, border-color 160ms ease;
}

.fe-projects-index-team-member:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.13);
}

.fe-projects-index-team-member.is-locked {
  grid-template-columns: 36px minmax(0, 1fr) auto 28px;
}

.fe-projects-index-team-member.is-inherited {
  opacity: 0.72;
}

.fe-projects-index-team-member.is-pending {
  border-style: dashed;
}

.fe-projects-index-team-avatar {
  background: linear-gradient(145deg, #ffc343, #ff704f);
  border: 0;
  color: #111;
  font-size: 11px;
}

.fe-projects-index-team-member__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fe-projects-index-team-member__copy strong {
  color: rgba(255, 255, 255, 0.91);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-team-member__copy small,
.fe-projects-index-team-member__copy > span {
  color: rgba(255, 255, 255, 0.34);
  font-size: 10px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-projects-index-team-member__copy > span {
  color: rgba(255, 255, 255, 0.48);
  margin-top: 1px;
}

.fe-projects-index-team-member select,
.fe-projects-index-team-member .fe-projects-index-team-permission-select {
  height: 34px;
  font-size: 11px;
}

.fe-projects-shell .fe-projects-index-team-member .fe-projects-index-team-permission-select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px !important;
  height: 30px;
  min-height: 30px;
  width: 80px;
}

.fe-projects-shell .fe-projects-index-team-member .fe-projects-index-team-permission-select::after {
  display: none;
}

.fe-projects-shell .fe-projects-index-team-member .fe-projects-index-team-permission-select:focus-within,
.fe-projects-shell .fe-projects-index-team-member .fe-projects-index-team-permission-select.is-open {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.fe-projects-shell .fe-projects-index-team-member button.fe-themed-select-trigger {
  border-radius: 7px !important;
  font-size: 12px;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
}

.fe-projects-index-team-member .fe-projects-index-team-permission-select .fe-themed-select-menu {
  bottom: calc(100% + 6px);
  margin-top: 0;
  min-width: 128px;
  top: auto;
}

.fe-projects-index-team-member__permission {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  white-space: nowrap;
}

.fe-projects-index-team-member__lock {
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: flex-end;
}

.fe-projects-index-team-member__lock small {
  font-size: 9px;
  margin-right: 5px;
  white-space: nowrap;
}

.fe-projects-index-team-member__lock svg {
  height: 16px;
  width: 16px;
}

.fe-projects-index-team-modal button.fe-projects-index-team-remove {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: flex;
  font-size: 17px;
  height: 26px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 2px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  width: 26px;
}

.fe-projects-index-team-modal button.fe-projects-index-team-remove:hover {
  background: rgba(255, 100, 76, 0.12);
  border-color: rgba(255, 100, 76, 0.28);
  color: #ff7058;
}

.fe-projects-index-team-feedback {
  background: rgba(255, 91, 74, 0.08);
  border: 1px solid rgba(255, 91, 74, 0.24);
  border-radius: 10px;
  color: #ff806a;
  font-size: 11px;
  line-height: 1.45;
  margin: 14px 0 0;
  padding: 9px 11px;
}

.fe-projects-index-team-feedback[data-tone="warning"] {
  background: rgba(245, 200, 66, 0.08);
  border-color: rgba(245, 200, 66, 0.24);
  color: #f5c842;
}

.fe-projects-index-team-feedback[hidden] {
  display: none;
}

.fe-projects-index-team-footer {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 16px 28px;
}

.fe-projects-index-team-modal button.fe-projects-index-team-save {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.68);
  min-width: 74px;
}

.fe-projects-index-team-modal button.fe-projects-index-team-save:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  opacity: 1;
}

/* Audio asset detail: Figma review workflow -------------------------------- */
.fe-audio-detail__review-panel {
  background: rgba(255, 255, 255, 0.03);
  padding: 20px 24px;
}

.fe-audio-detail__review-panel.is-approved {
  background: rgba(52, 211, 153, 0.025);
  border-color: rgba(52, 211, 153, 0.18);
}

.fe-audio-detail__review-panel.is-changes_requested {
  background: rgba(245, 200, 66, 0.025);
  border-color: rgba(245, 200, 66, 0.18);
}

.fe-audio-detail__review-panel.is-rejected {
  background: rgba(239, 68, 68, 0.025);
  border-color: rgba(239, 68, 68, 0.18);
}

.fe-audio-detail__review-header {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fe-audio-detail__review-header h2 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.fe-audio-detail .fe-audio-detail__review-header > span {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-fe-ui) !important;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 16px !important;
  text-align: right;
}

.fe-audio-detail__review-summary {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  min-height: 50px;
  padding: 12px 16px;
}

.fe-audio-detail__version-pill,
.fe-audio-detail__review-status {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 16px;
  padding: 3px 10px;
}

.fe-audio-detail__version-pill {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.2);
  color: var(--fe-audio-cyan);
  font-weight: 600;
}

.fe-audio-detail__review-status {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
}

.fe-audio-detail__review-status.is-approved {
  background: rgba(52, 211, 153, 0.13);
  color: var(--fe-audio-green);
}

.fe-audio-detail__review-status.is-changes_requested {
  background: rgba(245, 200, 66, 0.12);
  color: var(--fe-audio-yellow);
}

.fe-audio-detail__review-status.is-rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.fe-audio-detail__review-file {
  color: rgba(255, 255, 255, 0.4);
  flex: 1 1 auto;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-audio-detail button.fe-audio-detail__assign-reviewers {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--font-fe-ui) !important;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 16px !important;
  padding: 5px 0;
  transition: color 160ms ease;
}

.fe-audio-detail button.fe-audio-detail__assign-reviewers:hover {
  color: rgba(255, 255, 255, 0.7);
}

.fe-audio-detail__decision-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fe-audio-detail__decision-form {
  display: block;
  margin: 0;
}

.fe-audio-detail button.fe-audio-detail__decision {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-fe-ui) !important;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400 !important;
  height: 44px;
  line-height: 20px !important;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  width: 100%;
}

.fe-audio-detail button.fe-audio-detail__decision--approve {
  background: rgba(52, 211, 153, 0.04);
  border-color: rgba(52, 211, 153, 0.25);
  color: var(--fe-audio-green);
}

.fe-audio-detail button.fe-audio-detail__decision--approve:hover {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.4);
}

.fe-audio-detail button.fe-audio-detail__decision--changes {
  background: rgba(245, 200, 66, 0.04);
  border-color: rgba(245, 200, 66, 0.25);
  color: var(--fe-audio-yellow);
}

.fe-audio-detail button.fe-audio-detail__decision--changes:hover,
.fe-audio-detail button.fe-audio-detail__decision--changes[aria-expanded="true"] {
  background: rgba(245, 200, 66, 0.12);
  border-color: rgba(245, 200, 66, 0.4);
}

.fe-audio-detail button.fe-audio-detail__decision--reject {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

.fe-audio-detail button.fe-audio-detail__decision--reject:hover,
.fe-audio-detail button.fe-audio-detail__decision--reject[aria-expanded="true"] {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
}

.fe-audio-detail__feedback-panel {
  overflow: hidden;
  padding-top: 16px;
}

.fe-audio-detail__feedback-panel form {
  display: grid;
  gap: 10px;
}

.fe-audio-detail__feedback-panel textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  height: 80px;
  line-height: 1.5;
  min-height: 80px;
  padding: 12px 16px;
  resize: none;
  width: 100%;
}

.fe-audio-detail__feedback-panel textarea::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.fe-audio-detail__feedback-panel--changes textarea:focus {
  border-color: var(--fe-audio-yellow);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.1);
  outline: 0;
}

.fe-audio-detail__feedback-panel--reject textarea:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  outline: 0;
}

.fe-audio-detail .fe-audio-detail__feedback-panel textarea:focus-visible {
  outline: 0;
  outline-offset: 0;
}

.fe-audio-detail__feedback-panel form > div {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.fe-audio-detail__feedback-panel button,
.fe-audio-detail__feedback-panel input[type="submit"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 13px;
  min-height: 36px;
  padding: 7px 16px;
}

.fe-audio-detail__feedback-panel--changes input[type="submit"] {
  background: rgba(245, 200, 66, 0.14);
  border-color: rgba(245, 200, 66, 0.3);
  color: var(--fe-audio-yellow);
  font-weight: 600;
  padding-inline: 20px;
}

.fe-audio-detail__feedback-panel--reject input[type="submit"] {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-weight: 600;
  padding-inline: 20px;
}

.fe-audio-detail__decision-state {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.fe-audio-detail__decision-state > span {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.52);
  display: flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
}

.fe-audio-detail__decision-state > span svg {
  height: 18px;
  width: 18px;
}

.fe-audio-detail__decision-state > div {
  flex: 1 1 auto;
  min-width: 0;
}

.fe-audio-detail__decision-state strong {
  color: rgba(255, 255, 255, 0.82);
  display: block;
  font-size: 14px;
  font-weight: 650;
}

.fe-audio-detail__decision-state p,
.fe-audio-detail__decision-state small {
  color: rgba(255, 255, 255, 0.46);
  display: block;
  font-size: 12px;
  line-height: 1.55;
  margin-top: 5px;
}

.fe-audio-detail__decision-state--approved > span,
.fe-audio-detail__decision-state--approved strong {
  color: var(--fe-audio-green);
}

.fe-audio-detail__decision-state--approved > span {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.2);
}

.fe-audio-detail__decision-state--approved > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fe-audio-detail__decision-state--approved strong {
  font-weight: 600;
  line-height: 20px;
}

.fe-audio-detail__decision-state--approved p {
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  margin-top: 4px;
}

.fe-audio-detail__decision-state--approved .fe-audio-detail__final-decision {
  color: rgba(255, 255, 255, 0.35);
  line-height: 18px;
  margin-top: 12px;
}

.fe-audio-detail__decision-state--changes > span,
.fe-audio-detail__decision-state--changes strong {
  color: var(--fe-audio-yellow);
}

.fe-audio-detail__decision-state--rejected > span,
.fe-audio-detail__decision-state--rejected strong {
  color: #ef4444;
}

.fe-audio-detail__state-action {
  align-self: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  flex: 0 0 auto;
  font-size: 12px;
  padding: 8px 16px;
  text-decoration: none;
}

.fe-audio-detail__section-copy {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  margin: -12px 0 16px !important;
}

.fe-audio-detail__qc-counts {
  display: flex;
  gap: 12px;
}

.fe-audio-detail__qc-counts strong {
  font-size: 12px;
  font-weight: 650;
}

.fe-audio-detail__qc-counts .is-pass { color: var(--fe-audio-green); }
.fe-audio-detail__qc-counts .is-fail { color: #ef4444; }
.fe-audio-detail__qc-counts .is-awaiting { color: var(--fe-audio-yellow); }

.fe-audio-detail__qc-item > summary {
  cursor: pointer;
  list-style: none;
}

.fe-audio-detail__qc-item > summary::-webkit-details-marker {
  display: none;
}

.fe-audio-detail__qc-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.fe-audio-detail__qc-copy strong {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 600;
}

.fe-audio-detail__qc-copy small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  line-height: 1.45;
  margin-top: 2px;
}

.fe-audio-detail__qc-chevron {
  color: rgba(255, 255, 255, 0.3);
  flex: 0 0 14px;
  height: 14px;
  transition: transform 160ms ease;
  width: 14px;
}

.fe-audio-detail__qc-item[open] .fe-audio-detail__qc-chevron {
  transform: rotate(90deg);
}

.fe-audio-detail__qc-item .fe-audio-detail__qc-note {
  margin-top: 6px;
}

.fe-audio-detail__pipeline-step--purple { --fe-audio-stage: var(--fe-audio-purple); }

.fe-audio-detail .fe-projects-index-team-modal {
  z-index: 10020;
}

@media (max-width: 1100px) {
  .fe-audio-detail__review-header,
  .fe-audio-detail__review-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fe-audio-detail .fe-audio-detail__review-header > span {
    text-align: left;
  }

  .fe-audio-detail__review-file {
    flex-basis: 45%;
  }
}

@media (max-width: 767px) {
  .fe-audio-detail__review-panel {
    padding: 18px;
  }

  .fe-audio-detail__review-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .fe-audio-detail__review-summary {
    align-items: flex-start;
  }

  .fe-audio-detail__review-file {
    flex: 1 0 100%;
    white-space: normal;
  }

  .fe-audio-detail button.fe-audio-detail__assign-reviewers {
    margin-left: 0;
  }

  .fe-audio-detail__decision-grid {
    grid-template-columns: 1fr;
  }

  .fe-audio-detail__decision-state {
    flex-wrap: wrap;
  }

  .fe-audio-detail__state-action {
    margin-left: 52px;
  }

  .fe-audio-detail__qc-counts {
    flex-wrap: wrap;
  }

  .fe-audio-detail__qc-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fe-audio-detail__status {
    margin-left: 28px;
  }
}

@media (max-width: 600px) {
  .fe-projects-index-team-modal {
    align-items: flex-end;
    padding: 12px;
  }

  .fe-projects-index-team-panel {
    border-radius: 18px;
    max-height: calc(100dvh - 24px);
    width: 100%;
  }

  .fe-projects-index-team-header,
  .fe-projects-index-team-body,
  .fe-projects-index-team-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .fe-projects-index-team-invite__primary,
  .fe-projects-index-team-invite__secondary {
    grid-template-columns: 1fr;
  }

  .fe-projects-shell .fe-projects-index-team-modal .fe-projects-index-team-permission-select--invite {
    width: 100%;
  }

  .fe-projects-index-team-member,
  .fe-projects-index-team-member.is-locked {
    grid-template-columns: 36px minmax(0, 1fr) 28px;
  }

  .fe-projects-index-team-member select,
  .fe-projects-shell .fe-projects-index-team-member .fe-projects-index-team-permission-select,
  .fe-projects-index-team-member__permission {
    grid-column: 2 / 3;
    width: 100%;
  }

  .fe-projects-index-team-member__lock,
  .fe-projects-index-team-remove {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fe-audio-detail__review-panel,
  .fe-audio-detail__decision,
  .fe-audio-detail__assign-reviewers,
  .fe-audio-detail__qc-chevron,
  .fe-projects-index-team-modal,
  .fe-projects-index-team-panel,
  .fe-projects-index-team-modal input,
  .fe-projects-index-team-modal select,
  .fe-projects-index-team-permission-select,
  .fe-projects-index-team-permission-select::after,
  .fe-projects-index-team-permission-select .fe-themed-select-option,
  .fe-projects-index-team-modal button,
  .fe-projects-index-team-member {
    transition-duration: 0.01ms !important;
  }
}