/* ==========================================================================
   TRN Platform V2 — Design System Stylesheet
   Source: Figma "TRN-platform" / node 7:1015 (Style sheet - blue & orange)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Google Fonts — MUST be first rule in file (before any :root / selectors)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Merriweather+Sans:wght@300;400;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Design tokens (CSS custom properties)
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours */
  --trn-primary-blue:       #0f3395;
  --trn-dark-blue:          #182160;
  --trn-orange:             #e17903;
  --trn-orange-bg:          #fff6eb;

  /* Neutrals */
  --trn-white:              #ffffff;
  --trn-bg-gray:            #fbfbfb;
  --trn-outline:            #e8ecee;
  --trn-gray-200:           #e5e7eb;
  --trn-gray-400:           #9ca3af;
  --trn-gray-500:           #6b7280;
  --trn-dark-gray:          #3c3e40;   /* heading colour */
  --trn-paragraph:          #4c5052;
  --trn-tab-inactive:       #7a7a7b;
  --trn-breadcrumb:         #adadad;

  /* Semantic / state colours */
  --trn-red-700:            #c81e1e;
  --trn-red-50:             #fdf2f2;
  --trn-hover-blue:         #1e78c3;

  /* Typography */
  --trn-font-serif:         'Merriweather', Georgia, serif;
  --trn-font-sans:          'Merriweather Sans', sans-serif;

  /* Spacing scale (4-base) */
  --trn-space-1:  4px;
  --trn-space-2:  8px;
  --trn-space-3:  12px;
  --trn-space-4:  16px;
  --trn-space-5:  20px;
  --trn-space-6:  24px;
  --trn-space-8:  32px;
  --trn-space-10: 40px;
  --trn-space-15: 60px;
  --trn-space-30: 120px;

  /* Border radius */
  --trn-radius-sm: 4px;
  --trn-radius-md: 8px;

  /* Shadows */
  --trn-shadow-sm: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.10);
  --trn-shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.05);
}

/* --------------------------------------------------------------------------
   2. Page / layout shell (TRN_Layout.php)
   -------------------------------------------------------------------------- */
.trn-v2 {
  background: var(--trn-white);
  color: var(--trn-paragraph);
  font-family: var(--trn-font-sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

/* Override theme font on all elements inside .trn-v2 */
.trn-v2 h1,
.trn-v2 h2 {
  font-family: var(--trn-font-serif);
}
.trn-v2 h3,
.trn-v2 h4,
.trn-v2 h5,
.trn-v2 h6,
.trn-v2 p,
.trn-v2 a,
.trn-v2 li,
.trn-v2 label,
.trn-v2 span,
.trn-v2 button,
.trn-v2 input,
.trn-v2 select,
.trn-v2 textarea {
  font-family: var(--trn-font-sans);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

/* H1 — Merriweather Black 32px */
.trn-v2 h1,
.trn-v2 .trn-h1 {
  font-family: var(--trn-font-serif);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.64px;
  color: var(--trn-primary-blue);
}

/* H2 — Merriweather Bold 24px */
.trn-v2 h2,
.trn-v2 .trn-h2 {
  font-family: var(--trn-font-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.48px;
  color: var(--trn-dark-gray);
}

/* H3 — Merriweather Sans Bold 16px */
.trn-v2 h3,
.trn-v2 .trn-h3 {
  font-family: var(--trn-font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--trn-paragraph);
}

/* Body — Merriweather Sans Regular 16px */
.trn-v2 p,
.trn-v2 .trn-body {
  font-family: var(--trn-font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--trn-paragraph);
}

/* Label — Merriweather Sans Bold 14px, uppercase, +6% tracking */
.trn-v2 .trn-label {
  font-family: var(--trn-font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: var(--trn-paragraph);
}

/* Caption — Merriweather Sans Regular 14px */
.trn-v2 .trn-caption,
.trn-v2 small {
  font-family: var(--trn-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--trn-gray-500);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.trn-v2 .trn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--trn-space-2);
  padding: 10px 16px;
  border-radius: var(--trn-radius-sm);
  font-family: var(--trn-font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* Primary */
.trn-v2 .trn-btn-primary {
  background: var(--trn-primary-blue);
  color: var(--trn-white);
  box-shadow: var(--trn-shadow-md);
}
.trn-v2 .trn-btn-primary:hover,
.trn-v2 .trn-btn-primary:focus {
  background: var(--trn-hover-blue);
  box-shadow: var(--trn-shadow-md);
  color: var(--trn-white);
}

/* Secondary */
.trn-v2 .trn-btn-secondary {
  background: var(--trn-white);
  color: var(--trn-primary-blue);
  border-color: var(--trn-gray-200);
  box-shadow: var(--trn-shadow-sm);
}
.trn-v2 .trn-btn-secondary:hover,
.trn-v2 .trn-btn-secondary:focus {
  background: var(--trn-gray-200);
  box-shadow: var(--trn-shadow-md);
  color: var(--trn-primary-blue);
}

/* Disabled */
.trn-v2 .trn-btn:disabled,
.trn-v2 .trn-btn.disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. Form — input fields & dropdowns
   -------------------------------------------------------------------------- */
.trn-v2 .trn-field {
  display: flex;
  flex-direction: column;
  gap: var(--trn-space-2);
  width: 100%;
}

.trn-v2 .trn-field__label {
  font-family: var(--trn-font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: var(--trn-paragraph);
}

.trn-v2 .trn-field__label .required {
  color: var(--trn-orange);
  margin-left: 2px;
}

.trn-v2 .trn-field__input,
.trn-v2 .trn-field__select {
  width: 100%;
  padding: 8px 12px;
  background: var(--trn-bg-gray);
  border: 1px solid var(--trn-gray-200);
  border-radius: var(--trn-radius-sm);
  font-family: var(--trn-font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--trn-paragraph);
  transition: border-color .15s ease, background-color .15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.trn-v2 .trn-field__select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.trn-v2 .trn-field__input::placeholder,
.trn-v2 .trn-field__select.placeholder {
  color: var(--trn-gray-400);
}

/* Focused state */
.trn-v2 .trn-field__input:focus,
.trn-v2 .trn-field__select:focus {
  outline: none;
  background: var(--trn-orange-bg);
  border-color: var(--trn-orange);
}

/* Error state */
.trn-v2 .trn-field.has-error .trn-field__input,
.trn-v2 .trn-field.has-error .trn-field__select {
  background: var(--trn-red-50);
  border-color: var(--trn-red-700);
}

.trn-v2 .trn-field__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--trn-space-2);
  font-family: var(--trn-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--trn-gray-500);
}
.trn-v2 .trn-field__hint a {
  display: inline !important;
}

.trn-v2 .trn-field__error {
  display: flex;
  align-items: center;
  gap: var(--trn-space-2);
  font-family: var(--trn-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--trn-red-700);
}

/* --------------------------------------------------------------------------
   7. Radio buttons (pill style)
   -------------------------------------------------------------------------- */
.trn-v2 .trn-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--trn-space-4);
}

.trn-v2 .trn-radio-option {
  position: relative;
  display: inline-flex;
}

.trn-v2 .trn-radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.trn-v2 .trn-radio-option label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--trn-bg-gray);
  border: 1px solid var(--trn-gray-200);
  border-radius: var(--trn-radius-sm);
  font-family: var(--trn-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--trn-paragraph);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
  user-select: none;
}

/* The visual radio dot */
.trn-v2 .trn-radio-option label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--trn-gray-200);
  border-radius: 50%;
  background: var(--trn-white);
  flex-shrink: 0;
  transition: border-color .15s ease, background-color .15s ease;
}

.trn-v2 .trn-radio-option:hover label {
  background: var(--trn-gray-200);
}

.trn-v2 .trn-radio-option input[type="radio"]:checked + label {
  background: var(--trn-orange-bg);
  border-color: var(--trn-orange);
}

.trn-v2 .trn-radio-option input[type="radio"]:checked + label::before {
  background: var(--trn-orange);
  border-color: var(--trn-orange);
  box-shadow: inset 0 0 0 3px var(--trn-white);
}

/* --------------------------------------------------------------------------
   8. Tabs
   -------------------------------------------------------------------------- */
.trn-v2 .trn-tabs {
  display: flex;
  border-bottom: 3px solid var(--trn-outline);
}

.trn-v2 .trn-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  font-family: var(--trn-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--trn-tab-inactive);
  font-weight: 400;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.trn-v2 .trn-tab.active,
.trn-v2 .trn-tab[aria-selected="true"] {
  color: var(--trn-orange);
  font-weight: 700;
  border-bottom-color: var(--trn-orange);
}

/* --------------------------------------------------------------------------
   9. Breadcrumbs
   -------------------------------------------------------------------------- */
.trn-v2 .trn-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--trn-space-2);
  font-family: var(--trn-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--trn-breadcrumb);
}

.trn-v2 .trn-breadcrumb a {
  color: var(--trn-breadcrumb);
  text-decoration: none;
}

.trn-v2 .trn-breadcrumb a:hover {
  color: var(--trn-primary-blue);
}

.trn-v2 .trn-breadcrumb-sep {
  color: var(--trn-breadcrumb);
}

/* --------------------------------------------------------------------------
   10. Utility helpers
   -------------------------------------------------------------------------- */
.trn-v2 .trn-divider {
  border: none;
  border-top: 3px solid var(--trn-outline);
  margin: 0;
}

.trn-v2 .trn-section {
  padding: var(--trn-space-15);
}

.trn-v2 .trn-card {
  background: var(--trn-white);
  border: 1px solid var(--trn-outline);
  border-radius: var(--trn-radius-md);
  box-shadow: var(--trn-shadow-sm);
}

/* --------------------------------------------------------------------------
   11. Split-panel registration layout
   -------------------------------------------------------------------------- */
.trn-v2 .trn-split {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* Left: dark blue hero panel */
.trn-v2 .trn-split__panel {
  flex: 1;
  background: var(--trn-dark-blue);
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.trn-v2 .trn-split__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 560px;
  width: 100%;
}

.trn-v2 .trn-panel__eyebrow {
  font-family: var(--trn-font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: var(--trn-orange);
}

.trn-v2 .trn-panel__hero {
  display: flex;
  flex-direction: column;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -0.8px;
  white-space: nowrap;
}

.trn-v2 .trn-panel__hero-black {
  font-family: var(--trn-font-serif);
  font-weight: 900;
  font-style: normal;
  color: var(--trn-white);
}

.trn-v2 .trn-panel__hero-italic {
  font-family: var(--trn-font-serif);
  font-weight: 900;
  font-style: italic;
  color: var(--trn-orange);
}

.trn-v2 .trn-panel__desc {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.trn-v2 .trn-panel__divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.15);
  width: 100%;
}

/* Feature bullets */
.trn-v2 .trn-panel__features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.trn-v2 .trn-panel__feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.trn-v2 .trn-panel__feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--trn-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 22px;
}
.trn-v2 .trn-panel__feature-icon img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

.trn-v2 .trn-panel__feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trn-v2 .trn-panel__feature-title {
  font-family: var(--trn-font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--trn-white);
  margin: 0;
}

.trn-v2 .trn-panel__feature-desc {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

/* Universities box */
.trn-v2 .trn-panel__unis {
  background: rgba(255,255,255,0.07);
  border-radius: var(--trn-radius-sm);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trn-v2 .trn-panel__unis-label {
  font-family: var(--trn-font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: rgba(217,217,217,0.7);
  margin: 0;
}

.trn-v2 .trn-panel__unis-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trn-v2 .trn-panel__uni-badge {
  background: var(--trn-dark-blue);
  color: rgba(255,255,255,0.7);
  font-family: var(--trn-font-sans);
  font-size: 16px;
  line-height: 1.5;
  padding: 4px 8px;
  border-radius: var(--trn-radius-sm);
}

/* Right: form panel */
.trn-v2 .trn-split__form {
  flex: 1;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

.trn-v2 .trn-split__form-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 600px;
  width: 100%;
}

/* Page header inside form panel */
.trn-v2 .trn-form-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trn-v2 .trn-form-header__title {
  font-family: var(--trn-font-serif);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.64px;
  color: var(--trn-primary-blue);
  text-shadow: var(--trn-shadow-sm);
  margin: 0;
}

.trn-v2 .trn-form-header__sub {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--trn-paragraph);
  margin: 0;
}

.trn-v2 .trn-form-header__signin {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--trn-paragraph);
  margin: 0;
}

.trn-v2 .trn-form-header__signin a {
  color: var(--trn-orange);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   12. Step indicator
   -------------------------------------------------------------------------- */
.trn-v2 .trn-steps {
  display: flex;
  align-items: center;
  gap: 32px;
}

.trn-v2 .trn-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.trn-v2 .trn-step-item__num {
  width: 26px;
  height: 26px;
  border-radius: var(--trn-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--trn-font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.84px;
  flex-shrink: 0;
  background: #f3f4f6;
  color: var(--trn-gray-400);
}

.trn-v2 .trn-step-item__label {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--trn-gray-400);
  font-weight: 400;
  white-space: nowrap;
}

.trn-v2 .trn-step-item.active .trn-step-item__num {
  background: var(--trn-primary-blue);
  color: var(--trn-white);
}

.trn-v2 .trn-step-item.active .trn-step-item__label {
  color: var(--trn-primary-blue);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. Step form body
   -------------------------------------------------------------------------- */
.trn-v2 .trn-step-body {
  display: none;
  flex-direction: column;
  gap: 40px;
}

.trn-v2 .trn-step-body.active {
  display: flex;
}

.trn-v2 .trn-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.trn-v2 .trn-fields-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.trn-v2 .trn-fields-row .trn-field {
  flex: 1;
}

/* Step footer: divider + buttons */
.trn-v2 .trn-step-footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.trn-v2 .trn-step-footer__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trn-v2 .trn-step-footer__signin {
  flex: 1;
  text-align: right;
  font-family: var(--trn-font-sans);
  font-size: 16px;
  color: var(--trn-paragraph);
}

.trn-v2 .trn-step-footer__signin a {
  color: var(--trn-orange);
  text-decoration: underline;
}

/* Back icon button */
.trn-v2 .trn-btn-back {
  width: 46px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .trn-v2 .trn-split {
    flex-direction: column;
  }
  .trn-v2 .trn-split__panel {
    position: static;
    height: auto;
    padding: 40px 24px;
  }
  .trn-v2 .trn-split__form {
    padding: 40px 24px;
  }
  .trn-v2 .trn-panel__hero {
    white-space: normal;
    font-size: 28px;
  }
  .trn-v2 .trn-steps {
    gap: 16px;
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   14. Confirmation screen (step 4 — post-submission)
   -------------------------------------------------------------------------- */
/* Main heading */
.trn-v2 .trn-confirm__heading {
  font-family: var(--trn-font-serif);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.64px;
  color: var(--trn-primary-blue);
  margin: 0 0 12px;
}

/* Body copy */
.trn-v2 .trn-confirm__body {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--trn-paragraph);
  margin: 0;
}
.trn-v2 .trn-confirm__body p + p {
  margin-top: 8px;
}

/* Progress track — vertical stepper */
.trn-v2 .trn-confirm__progress {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Each progress row */
.trn-v2 .trn-confirm__progress-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Icon circle — base */
.trn-v2 .trn-confirm__icon {
  position: relative;   /* anchor for ::after connector */
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trn-v2 .trn-confirm__icon img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

/* Connector line: runs from bottom of icon, down through the 40px gap, to next icon */
.trn-v2 .trn-confirm__progress-item:not(:last-child) .trn-confirm__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46px;       /* bottom of the 46px circle */
  width: 2px;
  height: 40px;    /* same as the flex gap */
  background: var(--trn-gray-200);
  transform: translateX(-50%);
}

/* Step states */
.trn-v2 .trn-confirm__icon--done {
  background: #0e9f6e;
}
.trn-v2 .trn-confirm__icon--pending {
  background: #fff6eb;
  border: 2px solid #e17903;
}
.trn-v2 .trn-confirm__icon--locked {
  background: #f3f4f6;
}

/* Progress text */
.trn-v2 .trn-confirm__progress-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trn-v2 .trn-confirm__progress-title {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #181a1c;
  margin: 0;
}
.trn-v2 .trn-confirm__progress-sub {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--trn-gray-500);
  margin: 0;
}

/* Email notification box */
.trn-v2 .trn-confirm__email {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-top: 24px;
  border-top: 1.5px solid var(--trn-gray-200);
}
.trn-v2 .trn-confirm__email-icon {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  background: rgba(48, 83, 180, 0.1);
  border-radius: var(--trn-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trn-v2 .trn-confirm__email-title {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--trn-primary-blue);
  margin: 0 0 4px;
}
.trn-v2 .trn-confirm__email-body {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--trn-gray-500);
  margin: 0;
}
.trn-v2 .trn-confirm__email-body a {
  color: var(--trn-orange);
  text-decoration: underline;
}

/* =====================================================================
   DASHBOARD
   ===================================================================== */

/* Page wrapper — two-column layout */
.trn-v2 .trn-dash {
  display: flex;
  gap: 80px;
  padding: 60px 80px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: flex-start;
}
@media (max-width: 960px) {
  .trn-v2 .trn-dash {
    flex-direction: column;
    gap: 40px;
    padding: 32px 24px;
  }
  .trn-v2 .trn-dash__right {
    width: 100% !important;
  }
}

.trn-v2 .trn-dash__left  { flex: 1; min-width: 0; }
.trn-v2 .trn-dash__right { width: 413px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; }

/* Page heading */
.trn-v2 .trn-dash__h1 {
  font-family: var(--trn-font-serif);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.64px;
  color: var(--trn-primary-blue);
  margin: 0 0 48px;
}

/* Section headings */
.trn-v2 .trn-dash__section { margin-bottom: 40px; }
.trn-v2 .trn-dash__section:last-child { margin-bottom: 0; }

.trn-v2 .trn-dash__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.trn-v2 .trn-dash__section-title {
  font-family: var(--trn-font-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.48px;
  color: #181a1c;
  margin: 0;
}

/* View-all button */
.trn-v2 .trn-dash__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--trn-primary-blue);
  color: #fff;
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.15);
  margin-top: 16px;
}
.trn-v2 .trn-dash__view-all:hover { opacity: .88; }

/* Discussion cards */
.trn-v2 .trn-dash__cards { display: flex; flex-direction: column; gap: 12px; }

.trn-v2 .trn-dash__card {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
  overflow: hidden;
}

/* Pending banner on top of card */
.trn-v2 .trn-dash__card-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--trn-orange);
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.trn-v2 .trn-dash__card-banner svg { flex-shrink: 0; }

.trn-v2 .trn-dash__card-body {
  padding: 16px 20px;
}
.trn-v2 .trn-dash__card-title {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 700;
  color: #181a1c;
  margin: 0 0 6px;
  text-decoration: none;
  display: block;
}
.trn-v2 .trn-dash__card-title:hover { color: var(--trn-primary-blue); }

.trn-v2 .trn-dash__card-desc {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  color: var(--trn-gray-500);
  margin: 0 0 10px;
  line-height: 1.5;
  /* two-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trn-v2 .trn-dash__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.trn-v2 .trn-dash__tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-family: var(--trn-font-sans);
  font-size: 13px;
  font-weight: 600;
}
.trn-v2 .trn-dash__tag--blue   { background: #ebeeff; color: var(--trn-primary-blue); }
.trn-v2 .trn-dash__tag--orange { background: #fff6eb; color: var(--trn-orange); }

.trn-v2 .trn-dash__card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--trn-font-sans);
  font-size: 14px;
  color: var(--trn-gray-500);
}
.trn-v2 .trn-dash__card-meta svg { flex-shrink: 0; }

/* Empty state */
.trn-v2 .trn-dash__empty {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fbfbfb;
  font-family: var(--trn-font-sans);
  font-size: 15px;
  color: var(--trn-gray-500);
}

/* ---- Right column ---- */

/* Section label (uppercase small) */
.trn-v2 .trn-dash__label {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.84px;
  color: #9ca3af;
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* CTA card */
.trn-v2 .trn-dash__cta {
  background: var(--trn-dark-blue);
  border-radius: 4px;
  padding: 24px;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.15);
}
.trn-v2 .trn-dash__cta-title {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.trn-v2 .trn-dash__cta-body {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 20px;
  line-height: 1.5;
}
.trn-v2 .trn-dash__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--trn-orange);
  color: #fff;
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}
.trn-v2 .trn-dash__cta-btn:hover { opacity: .88; }

/* Notifications panel */
.trn-v2 .trn-dash__notif-pane {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 20px 22px;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.08);
}
.trn-v2 .trn-dash__notif-pane .trn-dash__notif-box {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-height: unset;
}
.trn-v2 .trn-dash__notif-pane .trn-dash__notif-item {
  padding-left: 0;
  padding-right: 0;
}
.trn-v2 .trn-dash__notif-pane .trn-dash__notif-item.is-unread::before {
  inset: 0 auto 0 -22px;
}
.trn-v2 .trn-dash__notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.trn-v2 .trn-dash__notif-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--trn-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--trn-orange);
  text-decoration: none;
}
.trn-v2 .trn-dash__notif-view-all:hover {
  opacity: 0.86;
}
.trn-v2 .trn-dash__notif-box {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  min-height: 120px;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.08);
}
.trn-v2 .trn-dash__notif-list {
  display: flex;
  flex-direction: column;
}
.trn-v2 .trn-dash__notif-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease;
}
.trn-v2 .trn-dash__notif-item + .trn-dash__notif-item {
  border-top: 1px solid #e5e7eb;
}
.trn-v2 .trn-dash__notif-item:hover {
  background: #fbfcff;
}
.trn-v2 .trn-dash__notif-item.is-unread {
  background: #fff;
}
.trn-v2 .trn-dash__notif-item.is-unread::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--trn-orange);
}
.trn-v2 .trn-dash__notif-icon {
  width: 48px;
  height: 48px;
  border-radius: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trn-v2 .trn-dash__notif-item--approved .trn-dash__notif-icon {
  background: #16a34a;
}
.trn-v2 .trn-dash__notif-item--rejected .trn-dash__notif-icon {
  background: #feeeee;
}
.trn-v2 .trn-dash__notif-item--pending .trn-dash__notif-icon {
  background: var(--trn-orange-bg, #fff6eb);
}
.trn-v2 .trn-dash__notif-item--message .trn-dash__notif-icon {
  background: #eef2ff;
}
.trn-v2 .trn-dash__notif-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 2px;
}
.trn-v2 .trn-dash__notif-text {
  font-family: var(--trn-font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #4c5052;
  word-break: break-word;
}
.trn-v2 .trn-dash__notif-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--trn-font-sans);
  font-size: 13px;
  color: #9ca3af;
}
.trn-v2 .trn-dash__notif-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--trn-orange);
  flex-shrink: 0;
}
.trn-v2 .trn-dash__notif-empty {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  color: #9ca3af;
  padding: 32px 24px;
  text-align: center;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 560px) {
  .trn-v2 .trn-dash__notif-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .trn-v2 .trn-dash__notif-item {
    padding: 18px 16px;
    gap: 14px;
  }
  .trn-v2 .trn-dash__notif-text {
    font-size: 14px;
  }
}

/* Profile card */
.trn-v2 .trn-dash__profile-card {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
  padding: 24px;
}
.trn-v2 .trn-dash__profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.trn-v2 .trn-dash__profile-label { margin: 0; }
.trn-v2 .trn-dash__profile-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--trn-font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--trn-orange);
  text-decoration: none;
}
.trn-v2 .trn-dash__profile-edit:hover { text-decoration: underline; }

.trn-v2 .trn-dash__profile-role {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--trn-primary-blue);
  margin: 0;
}
.trn-v2 .trn-dash__profile-uni {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  color: var(--trn-gray-500);
  margin: 4px 0 0;
}
.trn-v2 .trn-dash__profile-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 16px 0;
}
.trn-v2 .trn-dash__profile-rows { display: flex; flex-direction: column; gap: 12px; }
.trn-v2 .trn-dash__profile-row {}
.trn-v2 .trn-dash__profile-row-label {
  font-family: var(--trn-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0 0 4px;
}
.trn-v2 .trn-dash__profile-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 4px;
  background: #fff6eb;
  color: var(--trn-orange);
  font-family: var(--trn-font-sans);
  font-size: 13px;
  font-weight: 600;
}
.trn-v2 .trn-dash__profile-value {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  color: #4c5052;
  margin: 0;
}

/* =====================================================================
   RESEARCH AREA — CREATE / SUBMIT
   ===================================================================== */

.trn-v2 .ra-create {
  padding: 60px 80px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .trn-v2 .ra-create { padding: 32px 24px; }
  .trn-v2 .ra-create__split { flex-direction: column; gap: 40px; }
  .trn-v2 .ra-create__sidebar { width: 100% !important; position: static !important; }
}

/* Two-column split */
.trn-v2 .ra-create__split {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}
.trn-v2 .ra-create__main    { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.trn-v2 .ra-create__sidebar {
  width: 413px;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
  position: sticky;
  top: 80px;  /* below sticky topnav */
}

/* Back + heading block */
.trn-v2 .ra-create__heading-block { display: flex; flex-direction: column; gap: 4px; }

.trn-v2 .ra-create__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: var(--trn-orange);
  text-decoration: none;
  padding: 6px 8px;
  margin-left: -8px;
}
.trn-v2 .ra-create__back:hover { text-decoration: underline; }

.trn-v2 .ra-create__h1 {
  font-family: var(--trn-font-serif);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.64px;
  color: var(--trn-primary-blue);
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1);
}

/* Alert */
.trn-v2 .ra-create__alert {
  padding: 12px 16px;
  background: var(--trn-red-50);
  border: 1px solid var(--trn-red-700);
  border-radius: 4px;
  color: var(--trn-red-700);
  font-family: var(--trn-font-sans);
  font-size: 15px;
}

/* Fields */
.trn-v2 .ra-create__fields    { display: flex; flex-direction: column; gap: 24px; }
.trn-v2 .ra-create__fields-row { display: flex; gap: 24px; }
.trn-v2 .ra-create__fields-row .ra-create__field { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .trn-v2 .ra-create__fields-row { flex-direction: column; }
}

.trn-v2 .ra-create__field { display: flex; flex-direction: column; gap: 8px; }

.trn-v2 .ra-create__label {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: #4c5052;
}
.trn-v2 .ra-create__required { color: var(--trn-orange); }

.trn-v2 .ra-create__input,
.trn-v2 .ra-create__textarea {
  width: 100%;
  box-sizing: border-box;
  background: #fbfbfb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--trn-font-sans);
  font-size: 16px;
  color: #181a1c;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
.trn-v2 .ra-create__input::placeholder,
.trn-v2 .ra-create__textarea::placeholder { color: #9ca3af; }
.trn-v2 .ra-create__input:focus,
.trn-v2 .ra-create__textarea:focus {
  outline: none;
  border-color: var(--trn-primary-blue);
  background: #fff;
}
.trn-v2 .ra-create__textarea { resize: vertical; }

/* Select with chevron overlay */
.trn-v2 .ra-create__select-wrap {
  position: relative;
  width: 100%;
}
.trn-v2 .ra-create__select {
  width: 100%;
  box-sizing: border-box;
  background: #fbfbfb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 36px 8px 12px;
  font-family: var(--trn-font-sans);
  font-size: 16px;
  color: #181a1c;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.trn-v2 .ra-create__select:focus {
  outline: none;
  border-color: var(--trn-primary-blue);
  background: #fff;
}
.trn-v2 .ra-create__select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Buttons */
.trn-v2 .ra-create__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 4px;
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: none;
}
.trn-v2 .ra-create__btn--primary {
  background: var(--trn-primary-blue);
  color: #fff;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.15);
}
.trn-v2 .ra-create__btn--primary:hover { opacity: .88; }
.trn-v2 .ra-create__btn--secondary {
  background: #fff;
  color: var(--trn-primary-blue);
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
}
.trn-v2 .ra-create__btn--secondary:hover { background: #f9fafb; }

.trn-v2 .ra-create__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Success card */
.trn-v2 .ra-create__success {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  background: var(--trn-primary-blue);
  border-radius: 4px;
  padding: 40px 32px;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.15);
}
.trn-v2 .ra-create__success-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 99px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trn-v2 .ra-create__success-body { flex: 1; min-width: 0; }
.trn-v2 .ra-create__success-title {
  font-family: var(--trn-font-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.48px;
  color: #fff;
  margin: 0 0 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1);
}
.trn-v2 .ra-create__success-text {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
}
.trn-v2 .ra-create__success-text p + p {
  margin-top: 8px;
  color: #fff;
}

/* ---- Sidebar stepper ---- */
.trn-v2 .ra-create__sidebar-label {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0 0 16px;
}

.trn-v2 .ra-create__steps {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.trn-v2 .ra-create__step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Step icon circles */
.trn-v2 .ra-create__step-icon {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Connector line below each non-last icon (spans the 40px gap) */
.trn-v2 .ra-create__step:not(:last-child) .ra-create__step-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46px;
  width: 2px;
  height: 40px;
  transform: translateX(-50%);
  background: #e5e7eb;
}
/* Orange connector after step 1 in success state */
.trn-v2 .ra-create__step-icon--done::after {
  background: var(--trn-orange) !important;
}

/* States */
.trn-v2 .ra-create__step-icon--active {
  background: #f3faf7;
  border: 1px solid #0e9f6e;
}
.trn-v2 .ra-create__step-icon--done {
  background: #0e9f6e;
}
.trn-v2 .ra-create__step-icon--pending {
  background: #fff6eb;
  border: 1px solid var(--trn-orange);
}
.trn-v2 .ra-create__step-icon--locked {
  background: #f3f4f6;
}

.trn-v2 .ra-create__step-text { flex: 1; min-width: 0; }
.trn-v2 .ra-create__step-title {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 700;
  color: #181a1c;
  margin: 0 0 2px;
  line-height: 1.5;
}
.trn-v2 .ra-create__step-sub {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--trn-gray-500);
  margin: 0;
  line-height: 1.5;
}


/* ==========================================================================
   Research Areas Explore V2  (Figma node 110:1888)
   ========================================================================== */

/* ---- Page shell ---- */
.trn-v2 .ra-explore {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  font-family: var(--trn-font-sans);
}

.trn-v2 .ra-explore__h1 {
  font-family: var(--trn-font-serif);
  font-size: 28px;
  font-weight: 900;
  color: var(--trn-dark-gray);
  margin: 0 0 4px;
}

.trn-v2 .ra-explore__count {
  font-size: 13px;
  color: var(--trn-gray-500);
  margin: 0 0 28px;
}

.trn-v2 .ra-explore__body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}

.trn-v2 .ra-explore__results { min-width: 0; }

.trn-v2 .ra-explore__sidebar {
  position: sticky;
  top: 76px;
}

/* ---- Pagination ---- */
.trn-v2 .ra-explore__pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
}

.trn-v2 .ra-explore__page-link {
  font-family: var(--trn-font-sans);
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--trn-outline);
  border-radius: var(--trn-radius-sm);
  color: var(--trn-primary-blue);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.trn-v2 .ra-explore__page-link:hover,
.trn-v2 .ra-explore__page-link--active {
  background: var(--trn-primary-blue);
  color: var(--trn-white);
  border-color: var(--trn-primary-blue);
}

.trn-v2 .ra-explore__page-ellipsis {
  padding: 6px 4px;
  color: var(--trn-gray-500);
  font-size: 13px;
}

/* ---- Empty state ---- */
.trn-v2 .ra-explore__empty {
  font-size: 14px;
  color: var(--trn-gray-500);
  text-align: center;
  padding: 48px 20px;
  background: var(--trn-white);
  border: 1px solid var(--trn-outline);
  border-radius: var(--trn-radius-md);
}

/* ---- Toolbar (collapse all) ---- */
.trn-v2 .ra-explore__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.trn-v2 .ra-explore__collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--trn-orange);
  white-space: nowrap;
  transition: opacity 0.15s;
}

.trn-v2 .ra-explore__collapse-btn:hover { opacity: 0.75; }

/* ---- Discussion-topic card (Figma node 110:1926) ---- */
/* Pending approval banner — shared by ra-card and trn-dir-card */
.trn-v2 .trn-pending-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--trn-orange, #e17903);
  color: #fff;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  padding: 6px 24px;
  border-radius: 4px 4px 0 0;
}
.trn-v2 .trn-pending-banner svg { flex-shrink: 0; }

/* Wrapper for trn-dir-card with pending banner */
.trn-v2 .trn-dir-card-wrap { margin-bottom: 0; }
.trn-v2 .trn-dir-card-wrap .trn-pending-banner + .trn-dir-card {
  border-top: none;
  border-radius: 0 0 4px 4px;
}
/* ra-card-wrap: banner sits above card as a sibling (186-1506) */
.trn-v2 .ra-card-wrap { margin-bottom: 12px; }
.trn-v2 .ra-card-wrap--pending .trn-pending-banner {
  border-radius: 4px 4px 0 0;
}
.trn-v2 .ra-card-wrap--pending .ra-card {
  border-top: none;
  border-radius: 0 0 4px 4px;
  margin-bottom: 0;
}

.trn-v2 .ra-card {
  background: var(--trn-white);
  border: 1px solid var(--trn-gray-200);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 12px;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
}

.trn-v2 .ra-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Toggle: orange-bg square, chevron in orange */
.trn-v2 .ra-card__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--trn-orange-bg);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--trn-orange);
  padding: 0;
  margin-top: 2px;
  transition: background 0.15s;
}

.trn-v2 .ra-card__toggle:hover { background: #ffe4b8; }

.trn-v2 .ra-card__toggle svg {
  display: block;
  transition: transform 0.2s;
}

/* Default = closed → chevron points down.
   Open = rotated 180° → chevron points up. */
.trn-v2 .ra-card--open .ra-card__toggle svg { transform: rotate(180deg); }

/* Title column */
.trn-v2 .ra-card__title-col {
  flex: 1;
  min-width: 0;
}

.trn-v2 .ra-card__title {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--trn-primary-blue);
  text-decoration: none;
  display: block;
  line-height: 1.5;
}

.trn-v2 .ra-card__title:hover { text-decoration: underline; }

.trn-v2 .ra-card__subtitle {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  color: var(--trn-paragraph);
  margin: 2px 0 0;
  line-height: 1.5;
}

.trn-v2 .ra-card__subtitle-em {
  color: var(--trn-orange);
  font-weight: 600;
}

/* Logo (top-right) — flex: 1 0 0 + align-self: stretch so it fills the header height */
.trn-v2 .ra-card__logo {
  flex: 1 0 0;
  align-self: stretch;
  min-width: 80px;
  max-width: 140px;
  border-radius: 4px;
  overflow: hidden;
}

/* Collapsible body */
.trn-v2 .ra-card__body { display: none; }
.trn-v2 .ra-card--open .ra-card__body { display: block; }

.trn-v2 .ra-card__divider {
  border: none;
  border-top: 2px solid var(--trn-gray-400);
  margin: 16px 0;
}

.trn-v2 .ra-card__desc {
  font-family: var(--trn-font-sans);
  font-size: 16px;
  color: var(--trn-paragraph);
  line-height: 1.5;
  margin: 0 0 16px;
}

.trn-v2 .ra-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.trn-v2 .ra-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.trn-v2 .ra-card__participants {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--trn-font-sans);
  font-size: 14px;
  color: var(--trn-gray-400, #9ca3af);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tags */
.trn-v2 .ra-card__tag {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Grand Challenge — blue tag */
.trn-v2 .ra-card__tag--blue {
  background: #ebeeff;
  border: 1px solid var(--trn-primary-blue, #0f3395);
  color: var(--trn-primary-blue, #0f3395);
}

/* Research Area — orange tag */
.trn-v2 .ra-card__tag--orange {
  background: #fff6eb;
  border: 1px solid var(--trn-orange, #e17903);
  color: var(--trn-orange, #e17903);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

/* ---- Filter sidebar (Figma node 110:1944) ---- */
.trn-v2 .ra-filters {
  background: var(--trn-white);
  border: 1px solid var(--trn-gray-200);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
}

/* Header */
.trn-v2 .ra-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trn-v2 .ra-filters__title {
  font-family: var(--trn-font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--trn-primary-blue);
  line-height: 1.5;
}

.trn-v2 .ra-filters__clear {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-family: var(--trn-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--trn-orange);
  text-decoration: none;
}

.trn-v2 .ra-filters__clear:hover { text-decoration: underline; }

/* Search bar */
.trn-v2 .ra-filters__search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--trn-bg-gray);
  border: 1px solid var(--trn-gray-200);
  border-radius: 4px;
}

.trn-v2 .ra-filters__search-icon { flex-shrink: 0; }

.trn-v2 .ra-filters__search-input {
  flex: 1 0 0;
  border: none;
  background: transparent;
  font-family: var(--trn-font-sans);
  font-size: 13px;
  color: var(--trn-dark-gray);
  outline: none;
  padding: 0;
}

.trn-v2 .ra-filters__search-input::placeholder { color: var(--trn-gray-400); }

/* Divider */
.trn-v2 .ra-filters__divider {
  border: none;
  border-top: 1px solid var(--trn-gray-200);
  margin: 0;
}

/* Filter groups */
.trn-v2 .ra-filters__groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.trn-v2 .ra-filters__group { display: flex; flex-direction: column; gap: 8px; }

.trn-v2 .ra-filters__group-label {
  font-family: var(--trn-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--trn-paragraph);
  margin: 0;
  line-height: 1.5;
}

/* Checkbox list */
.trn-v2 .ra-filters__checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual checkbox row */
.trn-v2 .ra-fcheck {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--trn-bg-gray);
  border: 1px solid var(--trn-gray-200);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

/* Checked row */
.trn-v2 .ra-fcheck--checked {
  background: var(--trn-orange-bg);
  border-color: var(--trn-orange);
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
}

/* Hide the native radio */
.trn-v2 .ra-fcheck__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox box */
.trn-v2 .ra-fcheck__box {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--trn-gray-200);
  background: #F9FAFB;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.trn-v2 .ra-fcheck--checked .ra-fcheck__box {
  background: var(--trn-orange);
  border-color: var(--trn-orange);
  border-width: 0.5px;
}

.trn-v2 .ra-fcheck__label {
  font-family: var(--trn-font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--trn-paragraph);
  line-height: 1.5;
}

/* Select dropdowns */
.trn-v2 .ra-filters__select-wrap {
  position: relative;
}

.trn-v2 .ra-filters__select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--trn-font-sans);
  font-size: 13px;
  color: var(--trn-dark-gray);
  background: var(--trn-bg-gray);
  border: 1px solid var(--trn-gray-200);
  border-radius: 4px;
  padding: 8px 36px 8px 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s;
}

.trn-v2 .ra-filters__select:focus { border-color: var(--trn-primary-blue); }

.trn-v2 .ra-filters__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Apply button */
.trn-v2 .ra-filters__apply-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--trn-primary-blue);
  color: var(--trn-white);
  border: none;
  border-radius: 4px;
  font-family: var(--trn-font-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.15);
  transition: background 0.15s;
}

.trn-v2 .ra-filters__apply-btn:hover { background: var(--trn-dark-blue); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .trn-v2 .ra-explore__body {
    grid-template-columns: 1fr;
  }
  .trn-v2 .ra-explore__sidebar {
    position: static;
    order: -1;
  }
}

/* ============================================================
   My Account page — .trn-myaccount
   ============================================================ */
.trn-v2 .trn-myaccount {
  padding: 60px 80px;
  background: var(--trn-white);
}

.trn-v2 .trn-myaccount__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.trn-v2 .trn-myaccount__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.trn-v2 .trn-myaccount__right {
  width: 413px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 80px;
}

.trn-v2 .trn-myaccount__h1 {
  font-family: var(--trn-font-serif);
  font-size: 32px;
  font-weight: 900;
  color: var(--trn-primary-blue);
  margin: 0;
  letter-spacing: -0.64px;
  text-shadow: 0 1px 2px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.1);
  line-height: 1.25;
}

.trn-v2 .trn-myaccount__noprofile {
  border: 2px dashed var(--trn-gray-200);
  border-radius: var(--trn-radius-sm);
  padding: 60px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.trn-v2 .trn-myaccount__noprofile-icon  { font-size: 48px; color: var(--trn-gray-400); }
.trn-v2 .trn-myaccount__noprofile-title { font-family: var(--trn-font-serif); font-size: 20px; font-weight: 700; color: var(--trn-dark-gray); margin: 0; }
.trn-v2 .trn-myaccount__noprofile-desc  { font-size: 14px; color: var(--trn-gray-500); margin: 0; max-width: 360px; }

.trn-v2 .trn-myaccount__form   { display: flex; flex-direction: column; gap: 40px; }
.trn-v2 .trn-myaccount__fields { display: flex; flex-direction: column; gap: 24px; }

.trn-v2 .trn-myaccount__row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.trn-v2 .trn-myaccount__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.trn-v2 .trn-myaccount__radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--trn-bg-gray);
  border: 1px solid var(--trn-gray-200);
  border-radius: var(--trn-radius-sm);
  cursor: pointer;
  font-family: var(--trn-font-sans);
  font-size: 16px;
  color: var(--trn-paragraph);
  line-height: 1.5;
  transition: border-color .15s, background .15s;
}

.trn-v2 .trn-myaccount__radio--active,
.trn-v2 .trn-myaccount__radio:has(input:checked) {
  background: var(--trn-orange-bg);
  border-color: var(--trn-orange);
}

.trn-v2 .trn-myaccount__radio input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--trn-orange);
  cursor: pointer;
}

.trn-v2 .trn-myaccount__divider {
  border: none;
  border-top: 1px solid var(--trn-gray-200);
  margin: 0;
}

.trn-v2 .trn-myaccount__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Sidebar */
.trn-v2 .trn-myaccount__sidebar-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trn-v2 .trn-myaccount__sidebar-label {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--trn-gray-400);
  letter-spacing: 0.84px;
  margin: 0;
  line-height: 1.5;
}

.trn-v2 .trn-myaccount__appearance-card {
  background: var(--trn-white);
  border: 1px solid var(--trn-gray-200);
  border-radius: var(--trn-radius-sm);
  padding: 24px;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,.07);
  display: flex;
  gap: 16px;
  align-items: center;
}

.trn-v2 .trn-myaccount__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #0a003b;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.trn-v2 .trn-myaccount__app-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trn-v2 .trn-myaccount__app-role    { font-family: var(--trn-font-sans); font-size: 14px; color: #181a1c; margin: 0; line-height: 1.5; }
.trn-v2 .trn-myaccount__app-country { font-family: var(--trn-font-sans); font-size: 14px; color: var(--trn-gray-500); margin: 0; line-height: 1.5; }

.trn-v2 .trn-myaccount__activity-card {
  background: var(--trn-white);
  border: 1px solid var(--trn-gray-200);
  border-radius: var(--trn-radius-sm);
  padding: 24px;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,.07);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trn-v2 .trn-myaccount__stat         { display: flex; flex-direction: column; gap: 8px; }
.trn-v2 .trn-myaccount__stat-divider { border: none; border-top: 1px solid var(--trn-gray-200); margin: 0; }

.trn-v2 .trn-myaccount__stat-num {
  font-family: var(--trn-font-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--trn-primary-blue);
  margin: 0;
  letter-spacing: -0.48px;
  line-height: 1.25;
}

.trn-v2 .trn-myaccount__stat-label {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  color: var(--trn-gray-500);
  margin: 0;
  line-height: 1.5;
}

.trn-v2 .trn-myaccount__delete {
  font-family: var(--trn-font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.84px;
  color: #e02424;
  text-decoration: none;
  align-self: flex-end;
  padding: 6px 8px;
  line-height: 1.5;
}

.trn-v2 .trn-myaccount__delete:hover { text-decoration: underline; color: #c81e1e; }

@media (max-width: 1100px) {
  .trn-v2 .trn-myaccount { padding: 40px; }
  .trn-v2 .trn-myaccount__inner { gap: 40px; }
  .trn-v2 .trn-myaccount__right { width: 340px; }
}

@media (max-width: 860px) {
  .trn-v2 .trn-myaccount { padding: 24px; }
  .trn-v2 .trn-myaccount__inner { flex-direction: column; gap: 32px; }
  .trn-v2 .trn-myaccount__right { width: 100%; position: static; }
  .trn-v2 .trn-myaccount__row2  { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRN Directory — card grid (.trn-dir-card)
   Figma node 285:2163
   ───────────────────────────────────────────────────────────────────────────── */

.trn-v2 .ra-explore__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.trn-v2 .trn-dir-card {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,.07);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.trn-v2 .trn-dir-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 6px 14px 0 rgba(0,0,0,.08);
}

.trn-v2 .trn-dir-card__header {
  display: flex;
  gap: 16px;
  align-items: center;
}

.trn-v2 .trn-dir-card__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--trn-font-serif, 'Merriweather Sans', sans-serif);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  overflow: hidden;
  padding: 6px 0;
}

.trn-v2 .trn-dir-card__meta { flex: 1; min-width: 0; }

.trn-v2 .trn-dir-card__role {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--trn-primary-blue, #0f3395);
  margin: 0;
  line-height: 1.5;
}

.trn-v2 .trn-dir-card__univ {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-gray-500, #6b7280);
  margin: 0;
  line-height: 1.5;
}

.trn-v2 .trn-dir-card__divider {
  border: none;
  border-top: 1px solid var(--trn-gray-200, #e5e7eb);
  margin: 0;
}

.trn-v2 .trn-dir-card__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trn-v2 .trn-dir-card__label {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--trn-gray-400, #9ca3af);
  letter-spacing: .06em;
  margin: 0;
  line-height: 1.5;
}

.trn-v2 .trn-dir-card__badge {
  display: inline-flex;
  align-items: center;
  background: #fff6eb;
  border: 1px solid var(--trn-orange, #e17903);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-orange, #e17903);
  line-height: 1.5;
}

.trn-v2 .trn-dir-card__value {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: #4c5052;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .trn-v2 .ra-explore__grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRN Profile detail page (.trn-profile)
   Figma node 286:2796 "TRN DIRECTORY - single user"
   ───────────────────────────────────────────────────────────────────────────── */

.trn-v2 .trn-profile {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 80px;
  box-sizing: border-box;
}

/* Profile overrides for the two-column body */
.trn-v2 .trn-profile .ra-explore__body {
  grid-template-columns: 1fr 413px;
  gap: 80px;
  max-width: 1400px;
  width: 100%;
}

/* BACK button */
.trn-v2 .trn-profile__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--trn-orange, #e17903);
  letter-spacing: .06em;
  text-decoration: none;
  padding: 6px 8px;
  margin-bottom: 4px;
}
.trn-v2 .trn-profile__back:hover { text-decoration: underline; }

/* Heading block */
.trn-v2 .trn-profile__h1 {
  font-family: var(--trn-font-heading, 'Merriweather', serif);
  font-weight: 900;
  font-size: 32px;
  color: var(--trn-primary-blue, #0f3395);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}

.trn-v2 .trn-profile__joined {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-gray-400, #9ca3af);
  margin: 0;
}

/* Profile fields */
.trn-v2 .trn-profile__main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.trn-v2 .trn-profile__head  { display: flex; flex-direction: column; gap: 8px; }

.trn-v2 .trn-profile__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.trn-v2 .trn-profile__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Own-profile edit button */
.trn-v2 .trn-profile__own-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: -16px;
}

/* Divider */
.trn-v2 .trn-profile__divider {
  border: none;
  border-top: 1px solid var(--trn-gray-200, #e5e7eb);
  margin: 0;
}

/* Discussions section */
.trn-v2 .trn-profile__disc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 21px;
}

.trn-v2 .trn-profile__disc-count {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--trn-gray-500, #6b7280);
  letter-spacing: .06em;
  margin: 0;
}

.trn-v2 .trn-profile__collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--trn-orange, #e17903);
  letter-spacing: .06em;
  padding: 6px 8px;
}

.trn-v2 .trn-profile__discussions {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.trn-v2 .trn-profile__disc-empty {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-gray-400, #9ca3af);
  margin: 0;
}

/* Sidebar */
.trn-v2 .trn-profile__sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.trn-v2 .trn-profile__sblock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trn-v2 .trn-profile__slabel {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--trn-gray-400, #9ca3af);
  letter-spacing: .06em;
  margin: 0;
}

.trn-v2 .trn-profile__scard {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,.07);
}

.trn-v2 .trn-profile__scard--rows { gap: 0; }

/* University card */
.trn-v2 .trn-profile__uni-banner {
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  overflow: hidden;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trn-v2 .trn-profile__uni-img {
  width: 100%;
  height: 80px;
  object-fit: contain;
}
.trn-v2 .trn-profile__uni-info { display: flex; flex-direction: column; gap: 2px; }
.trn-v2 .trn-profile__uni-name {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--trn-primary-blue, #0f3395);
  margin: 0;
  line-height: 1.5;
}
.trn-v2 .trn-profile__uni-country {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: #4c5052;
  margin: 0;
  line-height: 1.5;
}

/* Online presence / Other details rows */
.trn-v2 .trn-profile__presence-row,
.trn-v2 .trn-profile__detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.trn-v2 .trn-profile__scard--rows .trn-profile__presence-row:first-child,
.trn-v2 .trn-profile__scard--rows .trn-profile__detail-row:first-child { padding-top: 0; }
.trn-v2 .trn-profile__scard--rows .trn-profile__presence-row:last-child,
.trn-v2 .trn-profile__scard--rows .trn-profile__detail-row:last-child  { padding-bottom: 0; }

.trn-v2 .trn-profile__row-sep {
  border: none;
  border-top: 1px solid var(--trn-gray-200, #e5e7eb);
  margin: 0;
}

.trn-v2 .trn-profile__detail-row {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.trn-v2 .trn-profile__detail-value {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 16px;
  color: #4c5052;
  margin: 0;
  line-height: 1.5;
  word-break: break-all;
}

/* Visit button */
.trn-v2 .trn-profile__visit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  padding: 10px 16px;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--trn-primary-blue, #0f3395);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,.07);
}
.trn-v2 .trn-profile__visit-btn:hover { background: #f3f4f6; }

/* Send a message button (Figma 286:2816 → node 378:3308) */
.trn-v2 .trn-profile__msg-btn {
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 178px !important;
  max-width: 178px !important;
  padding: 10px 16px !important;
  background: #0f3395 !important;
  background-color: #0f3395 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Merriweather Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  box-shadow: 0px 4px 8px 0px rgba(24,33,96,0.15) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.trn-v2 .trn-profile__msg-btn:hover,
.trn-v2 .trn-profile__msg-btn:focus {
  background: #182160 !important;
  background-color: #182160 !important;
  color: #fff !important;
  text-decoration: none !important;
  border: none !important;
}
.trn-v2 .trn-profile__msg-btn svg { flex-shrink: 0 !important; }

@media (max-width: 860px) {
  .trn-v2 .trn-profile__h1 { font-size: 24px; }
  .trn-v2 .trn-profile { padding: 32px 20px; }
  .trn-v2 .trn-profile .ra-explore__body { grid-template-columns: 1fr; gap: 32px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Delete-account confirmation modal  (Figma node 196:2007)
   ───────────────────────────────────────────────────────────────────────────── */

.trn-del-modal {
  position: fixed;
  inset: 0;
  background: rgba(202, 202, 202, 0.8);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 90px;
}

.trn-del-modal[hidden] { display: none; }

.trn-del-modal__card {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  padding: 24px;
  width: 620px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 4px 4px 0 rgba(147, 147, 147, 0.07);
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.trn-del-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trn-del-modal__title {
  font-family: var(--trn-font-heading, 'Merriweather', serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #181a1c;
  margin: 0;
}

.trn-del-modal__desc {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--trn-paragraph, #4c5052);
  margin: 0;
}

.trn-del-modal__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trn-del-modal__sep {
  border: none;
  border-top: 1px solid var(--trn-gray-200, #e5e7eb);
  margin: 0;
}

.trn-del-modal__actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.trn-del-modal__confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e02424;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: 0 4px 8px 0 rgba(24, 33, 96, 0.15);
  cursor: pointer;
}

.trn-del-modal__confirm:hover { background: #c81e1e; color: #fff; }

/* ============================================================
   .trn-disc  — Research Area / Discussion detail page (V2)
   ============================================================ */

.trn-disc {
  display: grid;
  grid-template-columns: 1fr 413px;
  gap: 80px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 80px;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .trn-disc {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 40px;
  }
}

/* ---- Back link ---- */
.trn-disc__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--trn-orange, #e17903);
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 24px;
}
.trn-disc__back:hover { opacity: 0.8; color: var(--trn-orange, #e17903); }

/* ---- Heading ---- */
.trn-disc__h1 {
  font-family: var(--trn-font-serif, serif);
  font-weight: 900;
  font-size: 32px;
  color: var(--trn-primary-blue, #0f3395);
  line-height: 1.25;
  letter-spacing: -0.64px;
  text-shadow: 0 1px 2px rgba(0,0,0,.10);
  margin: 0 0 12px;
}

/* ---- Meta line (created-by · date · participants) ---- */
.trn-disc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-gray-400, #9ca3af);
  margin-bottom: 16px;
}
.trn-disc__meta-author { font-size: 16px; color: var(--trn-gray-500, #6b7280); }
.trn-disc__meta-author em { font-style: normal; color: var(--trn-orange, #e17903); font-weight: 700; }
.trn-disc__meta-sep { color: var(--trn-gray-200, #e5e7eb); }
.trn-disc__meta-item { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Badges / tags ---- */
.trn-disc__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.trn-disc__badge {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid;
}
.trn-disc__badge--blue  { background: #ebeeff; border-color: var(--trn-primary-blue,#0f3395); color: var(--trn-primary-blue,#0f3395); }
.trn-disc__badge--orange { background: #fff6eb; border-color: var(--trn-orange,#e17903);     color: var(--trn-orange,#e17903); }

/* ---- Section label ---- */
.trn-disc__label {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: var(--trn-gray-400, #9ca3af);
  margin: 0 0 8px;
}

/* ---- About body ---- */
.trn-disc__about {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 16px;
  color: #4c5052;
  line-height: 1.6;
  margin: 0 0 20px;
}

.trn-disc__hr {
  border: none;
  border-top: 1px solid var(--trn-gray-200, #e5e7eb);
  margin: 20px 0;
}

/* ---- Thread section ---- */
.trn-disc__thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.trn-disc__thread-sort {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--trn-orange, #e17903);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.trn-disc__thread-card {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
}

/* Ghost messages (not-joined state) */
.trn-disc__ghost-msg {
  display: flex;
  gap: 12px;
}
.trn-disc__ghost-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}
.trn-disc__ghost-body { flex: 1; }
.trn-disc__ghost-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.trn-disc__ghost-name {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: #181a1c;
}
.trn-disc__ghost-time {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-gray-400, #9ca3af);
}
.trn-disc__ghost-bubble {
  background: #fbfbfb;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 0 4px 4px 4px;
  padding: 16px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: #4c5052;
  line-height: 1.6;
}

/* Blur overlay for not-joined */
.trn-disc__blur-wrap {
  position: relative;
  overflow: hidden;
}
.trn-disc__blur-overlay {
  position: absolute;
  top: 37px;
  left: 0; right: 0; bottom: 0;
  backdrop-filter: blur(7px);
  background: rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  z-index: 2;
}
.trn-disc__blur-title {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: #181a1c;
  margin: 0;
}
.trn-disc__blur-sub {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-gray-500, #6b7280);
  margin: 0;
  max-width: 320px;
}

/* View-full button (joined state) */
.trn-disc__view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--trn-primary-blue, #0f3395);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.15);
  margin-top: 16px;
  cursor: pointer;
  box-sizing: border-box;
}
.trn-disc__view-btn:hover { background: #0a2580; color: #fff; }

/* ---- Sidebar shared ---- */
.trn-disc__sidebar { display: flex; flex-direction: column; gap: 24px; }

.trn-disc__sidebar-label {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: var(--trn-gray-400, #9ca3af);
  margin: 0 0 8px;
}

/* Join CTA card (not-joined) */
.trn-disc__join-card {
  background: var(--trn-dark-blue, #182160);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.15);
}
.trn-disc__join-card-title {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin: 0;
}
.trn-disc__join-card-body {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0;
}
.trn-disc__join-card-title { color: #fff !important; }

/* ---- Research Area create — block notices ---- */
.ra-create__block-notice {
  display: flex;
  gap: 16px;
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 16px;
  border: 1px solid;
}
.ra-create__block-notice--pending {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}
.ra-create__block-notice--no-profile {
  background: #eff6ff;
  border-color: var(--trn-primary-blue, #0f3395);
  color: var(--trn-primary-blue, #0f3395);
}
.ra-create__block-notice-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.ra-create__block-notice-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ra-create__block-notice-title {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  color: inherit;
}
.ra-create__block-notice-text {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  margin: 0;
  color: inherit;
  opacity: 0.85;
  line-height: 1.5;
}
.ra-create__block-notice-link {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
}
.ra-create__block-notice-link:hover { opacity: 0.75; }

/* Joined action card */
.trn-disc__joined-card {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
}
.trn-disc__joined-card-banner {
  background: #0e9f6e;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.trn-disc__joined-card-body {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trn-disc__joined-card-sep {
  border: none;
  border-top: 1px solid var(--trn-gray-200, #e5e7eb);
  margin: 4px 0;
}

/* Creator card */
.trn-disc__creator-card {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
}
.trn-disc__creator-banner {
  width: 100%;
  height: 79px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
}
.trn-disc__creator-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trn-disc__creator-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: #eb3c7f;
}
.trn-disc__creator-name {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--trn-primary-blue, #0f3395);
}
.trn-disc__creator-uni {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-gray-500, #6b7280);
}
.trn-disc__creator-sep {
  border: none;
  border-top: 1px solid var(--trn-gray-200, #e5e7eb);
  margin: 0;
}
.trn-disc__creator-rows { display: flex; flex-direction: column; gap: 12px; }
.trn-disc__creator-field-label {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--trn-gray-400, #9ca3af);
  margin: 0 0 4px;
}
.trn-disc__creator-field-value {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: #4c5052;
  margin: 0;
}

/* Participants card */
.trn-disc__participants-card {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trn-disc__participant-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  border-radius: 4px;
}
.trn-disc__participant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--trn-primary-blue, #0f3395);
}
.trn-disc__participant-info { flex: 1; min-width: 0; }
.trn-disc__participant-role {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  font-weight: 400;
  color: #181a1c;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trn-disc__participant-role strong {
  font-weight: 700;
}
.trn-disc__participant-country {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-gray-500, #6b7280);
  margin: 0;
}

/* Admin controls strip */
.trn-disc__admin-bar {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  padding: 16px 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
  margin-bottom: 24px;
}

/* Orange button variant */
.trn-btn-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--trn-orange, #e17903);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.trn-btn-orange:hover { background: #c96c02; color: #fff; }

.trn-v2 a.trn-btn-orange,
.trn-v2 a.trn-btn-orange:visited,
.trn-v2 a.trn-btn-orange:hover,
.trn-v2 a.trn-btn-orange:focus,
.trn-v2 button.trn-btn-orange,
.trn-v2 button.trn-btn-orange:hover,
.trn-v2 button.trn-btn-orange:focus {
  color: #fff !important;
  text-decoration: none !important;
}

.trn-v2 .trn-btn-orange svg,
.trn-v2 .trn-btn-orange svg path,
.trn-v2 .trn-btn-orange svg circle,
.trn-v2 .trn-btn-orange svg line {
  color: #fff !important;
  stroke: #fff !important;
}

/* Secondary / white outline button */
.trn-disc__share-btn,
.trn-disc__leave-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  padding: 10px 16px;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.trn-disc__share-btn { color: var(--trn-primary-blue, #0f3395); }
.trn-disc__leave-btn { color: #e02424; }
.trn-disc__share-btn:hover { background: #f3f4f6; color: var(--trn-primary-blue, #0f3395); }
.trn-disc__leave-btn:hover  { background: #fef2f2; color: #c81e1e; }

/* ============================================================
   Stacked sidebar action buttons (176-887)
   ============================================================ */
.trn-disc__sidebar-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 4px;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .15s, color .15s;
}
.trn-disc__sidebar-action--primary {
  background: var(--trn-primary-blue, #0f3395);
  color: #fff;
  border: none;
}
.trn-disc__sidebar-action--primary:hover { background: var(--trn-dark-blue, #182160); color: #fff; }
.trn-disc__sidebar-action--secondary {
  background: #fff;
  color: var(--trn-primary-blue, #0f3395);
  border: 1px solid var(--trn-gray-200, #e5e7eb);
}
.trn-disc__sidebar-action--secondary:hover { background: #f3f4f6; }
.trn-disc__sidebar-action--leave {
  background: #fff;
  color: #e02424;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
}
.trn-disc__sidebar-action--leave:hover { background: #fef2f2; color: #c81e1e; }
.trn-disc__sidebar-action--delete {
  background: #fff;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.trn-disc__sidebar-action--delete:hover { background: #fef2f2; color: #991b1b; }

/* ============================================================
   Pending approval banner (186-1505)
   ============================================================ */
.trn-disc__pending-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 12px 16px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: #92400e;
  margin-bottom: 4px;
}
.trn-disc__pending-banner svg { flex-shrink: 0; color: #d97706; }

/* ============================================================
   Thread: creator+pending nothing-here empty state (179-923)
   ============================================================ */
.trn-disc__nothing-here {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 120px 24px;
  background: #fbfbfb;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  text-align: center;
  margin-top: 8px;
}
.trn-disc__nothing-here-icon {
  background: var(--trn-dark-blue, #0f3395);
  border-radius: 99px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trn-disc__nothing-here-icon img {
  display: block;
  width: 48px;
  height: 48px;
}
.trn-disc__nothing-here-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.trn-disc__nothing-here-title {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #181a1c;
  margin: 0;
}
.trn-disc__nothing-here-sub {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--trn-gray-500, #6b7280);
  margin: 0;
  max-width: 357px;
}

/* ============================================================
   Thread: pending-locked state
   ============================================================ */
.trn-disc__thread-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  background: #fffbeb;
  border: 1px dashed #fcd34d;
  border-radius: 6px;
  text-align: center;
  margin-top: 8px;
}
.trn-disc__thread-pending-title {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: #92400e;
  margin: 0;
}
.trn-disc__thread-pending-sub {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: #b45309;
  margin: 0;
  max-width: 380px;
}

/* ============================================================
   Muted / pending thread cards
   ============================================================ */
.trn-disc__thread-card--muted { opacity: .7; pointer-events: none; }
.trn-disc__ghost-bubble--muted {
  font-style: italic;
  color: #9ca3af !important;
}

/* ============================================================
   Sidebar: pending + NOT member card (186-1505)
   ============================================================ */
.trn-disc__pending-notmember-card {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.trn-disc__pending-notmember-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fef3c7;
  border: 2px solid #fcd34d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
}
.trn-disc__pending-notmember-card-title {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: #92400e;
  margin: 0;
}
.trn-disc__pending-notmember-card-body {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: #b45309;
  margin: 0;
}

/* ============================================================
   Sidebar: pending + MEMBER card (179-951)
   ============================================================ */
.trn-disc__pending-member-card {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}
.trn-disc__pending-member-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fef3c7;
  color: #92400e;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
}
.trn-disc__pending-member-card-header svg { flex-shrink: 0; color: #d97706; }
.trn-disc__pending-member-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
}
.trn-disc__pending-member-card-text {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-gray-500, #6b7280);
  margin: 0;
}

/* ============================================================
   Creator panel (176-887 / 179-862)
   ============================================================ */
.trn-disc__creator-panel {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}
.trn-disc__creator-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--trn-dark-blue, #182160);
  color: #fff;
  padding: 14px 20px;
}
.trn-disc__creator-panel-header--pending {
  background: var(--trn-orange, #e17903);
  color: #fff;
  padding: 8px 24px;
}
.trn-disc__creator-panel-header svg { flex-shrink: 0; }
.trn-disc__creator-panel-header .trn-disc__creator-panel-header-title {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trn-disc__creator-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 18px;
}
/* Disabled sidebar action */
.trn-disc__sidebar-action--disabled {
  background: #f9fafb;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
  cursor: not-allowed;
  opacity: .75;
  position: relative;
}
.trn-disc__sidebar-action-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  background: #e5e7eb;
  color: #6b7280;
  padding: 2px 6px;
  border-radius: 99px;
  text-transform: uppercase;
}

/* ============================================================
   Modal overlay + card (leave 179-1483, delete 179-1155)
   ============================================================ */
.trn-ra-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trn-ra-modal[hidden] { display: none !important; }
.trn-ra-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(202, 202, 202, .80);
  backdrop-filter: blur(7px);
}
.trn-ra-modal__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  margin: 16px;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.trn-ra-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.trn-ra-modal__close:hover { color: #374151; background: #f3f4f6; }
.trn-ra-modal__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.trn-ra-modal__icon--leave {
  background: #fee2e2;
  color: #dc2626;
}
.trn-ra-modal__icon--delete {
  background: #fee2e2;
  color: #dc2626;
}
.trn-ra-modal__title {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 20px;
  color: #111827;
  margin: 0;
}
.trn-ra-modal__body {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 15px;
  color: #4b5563;
  margin: 0;
  line-height: 1.6;
}
.trn-ra-modal__actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  justify-content: center;
}
.trn-ra-modal__btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 4px;
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  border: none;
  transition: background .15s, color .15s;
}
.trn-ra-modal__btn--cancel {
  background: #fff;
  color: #0f3395;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 4px 0 rgba(147,147,147,0.07);
}
.trn-ra-modal__btn--cancel:hover { background: #f3f4f6; }
.trn-ra-modal__btn--leave {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e02424;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,.15);
}
.trn-ra-modal__btn--leave:hover { background: #c81b1b; }
/* Delete modal (179-1483) */
.trn-ra-modal__del-heading {
  width: 100%;
}
.trn-ra-modal__del-title {
  font-family: var(--trn-font-serif, 'Merriweather', serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #181a1c;
  margin: 0;
}
.trn-ra-modal__del-title-name {
  color: var(--trn-dark-blue, #0f3395);
}
.trn-ra-modal__del-body {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 16px;
  color: #4c5052;
  line-height: 1.5;
  width: 100%;
}
.trn-ra-modal__del-body p { margin: 0 0 8px; }
.trn-ra-modal__del-body p:last-child { margin-bottom: 0; }
.trn-ra-modal__btn--transfer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--trn-dark-blue, #0f3395);
  color: #fff;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,.15);
  flex: 0 0 auto;
}
.trn-ra-modal__btn--transfer:hover:not(:disabled) { background: #182160; }
.trn-ra-modal__btn--transfer:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
}
.trn-ra-modal__btn--delete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e02424;
  color: #fff;
  flex: 0 0 auto;
}
.trn-ra-modal__btn--delete:hover { background: #c81b1b; }
.trn-ra-modal__btn--cancel {
  flex: 0 0 auto;
}
/* Wide variant (620px) — join & share modals */
.trn-ra-modal--wide .trn-ra-modal__card {
  max-width: 620px;
  align-items: flex-start;
  top: 90px;
  align-self: flex-start;
}
/* Join modal — layout */
.trn-ra-modal--wide .trn-ra-modal__card > form {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 60px;
}
.trn-ra-modal__join-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.trn-ra-modal__join-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.trn-ra-modal__join-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.trn-ra-modal__join-footer .trn-ra-modal__sep { margin: 0; }

/* Join modal — typography */
.trn-ra-modal__join-title {
  font-family: var(--trn-font-serif, 'Merriweather', serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #181a1c;
  margin: 0;
}
.trn-ra-modal__join-title-disc { color: var(--trn-primary-blue, #0f3395); }
.trn-ra-modal__join-intro {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 16px;
  color: #181a1c;
  margin: 0;
  line-height: 1.5;
}
.trn-ra-modal__consents {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.trn-ra-modal__consent-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  background: #fbfbfb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
}
.trn-ra-modal__consent-cb {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #f9fafb;
  cursor: pointer;
  accent-color: var(--trn-primary-blue, #0f3395);
}
.trn-ra-modal__consent-text {
  flex: 1 1 auto;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 16px;
  color: #4c5052;
  line-height: 1.5;
  text-align: left;
}
.trn-ra-modal__btn--join {
  background: var(--trn-primary-blue, #0f3395);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  padding: 10px 20px;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.15);
}
.trn-ra-modal__btn--join:hover:not(:disabled) { background: #0c2a7a; }
.trn-ra-modal__btn--join:disabled { opacity: .5; cursor: not-allowed; }
/* Left-aligned actions row */
.trn-ra-modal__actions--left {
  justify-content: flex-start;
  margin-top: 0;
}
.trn-ra-modal__actions--left .trn-ra-modal__btn {
  flex: 0 1 auto;
}
/* Separator */
.trn-ra-modal__sep {
  width: 100%;
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 20px 0 16px;
}
/* Share modal */
.trn-ra-modal__share-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24px;
}
.trn-ra-modal__share-title {
  font-family: var(--trn-font-serif, 'Merriweather', serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #181a1c;
  margin: 0;
}
.trn-ra-modal__share-url-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
}
.trn-ra-modal__share-url-group {
  flex: 1 1 0;
  min-width: 0;
}
.trn-ra-modal__share-url-label {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: #4c5052;
  letter-spacing: .06em;
  margin: 0 0 6px;
}
.trn-ra-modal__share-url-input {
  background: #fbfbfb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 16px;
  color: #4c5052;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
  width: 100%;
  box-sizing: border-box;
}
.trn-ra-modal__btn--copy {
  flex: 0 0 auto;
  background: var(--trn-primary-blue, #0f3395);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 16px;
  white-space: nowrap;
  box-shadow: 0 4px 8px 0 rgba(24,33,96,0.15);
}
.trn-ra-modal__btn--copy:hover { background: #0c2a7a; }
.trn-disc__admin-label {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: .5px;
  text-transform: uppercase;
  align-self: center;
}

/* ============================================================
   .trn-dash__empty  — Dashboard empty state overhaul
   ============================================================ */
.trn-dash__empty-box {
  background: #fbfbfb;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 12px;
}
.trn-dash__empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 99px;
  background: var(--trn-primary-blue, #0f3395);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trn-dash__empty-title {
  font-family: var(--trn-font-sans, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: #181a1c;
  margin: 0;
}
.trn-dash__empty-sub {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 16px;
  color: var(--trn-gray-500, #6b7280);
  margin: 0;
  max-width: 360px;
}

/* ============================================================
   Pending-card bulk-select UI  (Figma 442-3659)
   ============================================================ */

/* ── Shared checkbox box ── */
.trn-bulk-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #f9fafb;
  border: 1.5px solid var(--trn-gray-200, #e5e7eb);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.trn-bulk-check-box--checked {
  background: var(--trn-orange, #e17903);
  border-color: var(--trn-orange, #e17903);
}
.trn-bulk-check-box--partial {
  background: var(--trn-orange, #e17903);
  border-color: var(--trn-orange, #e17903);
  opacity: 0.6;
}
.trn-bulk-check-box__tick {
  display: none;
}
.trn-bulk-check-box--checked .trn-bulk-check-box__tick,
.trn-bulk-check-box--partial .trn-bulk-check-box__tick {
  display: block;
}

/* ── Per-card checkbox wrap ── */
.trn-dir-card__check-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Pending-card header (checkbox + avatar + meta) ── */
.trn-dir-card--pending .trn-dir-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Card action buttons row ── */
.trn-dir-card__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.trn-dir-card__btn-approve {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--trn-primary-blue, #0f3395);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.trn-dir-card__btn-approve:hover {
  background: #0a2575;
}

.trn-dir-card__btn-reject {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  color: var(--trn-red-700, #c81e1e);
  border: 1.5px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.trn-dir-card__btn-reject:hover {
  border-color: var(--trn-red-700, #c81e1e);
  color: var(--trn-red-700, #c81e1e);
}

/* ── Bulk action bar ── */
.trn-bulk-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 6px;
  margin-bottom: 16px;
}

.trn-bulk-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trn-bulk-bar__check-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* ============================================================
   Discussion V2 page  (Figma 502-3554)
   ============================================================ */

.trn-dv2 {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  font-family: var(--trn-font-sans, sans-serif);
}

/* ── Header ── */
.trn-dv2__head {
  margin-bottom: 28px;
}
.trn-dv2__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--trn-primary-blue, #0f3395);
  text-decoration: none;
  margin-bottom: 16px;
}
.trn-dv2__back:hover { text-decoration: underline; }

.trn-dv2__title {
  font-family: var(--trn-font-serif, serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--trn-dark-gray, #3c3e40);
  margin: 0 0 10px;
  line-height: 1.3;
}
.trn-dv2__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.trn-dv2__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.trn-dv2__tag--orange {
  background: var(--trn-orange-bg, #fff6eb);
  color: var(--trn-orange, #e17903);
  border: 1px solid #f5c97a;
}
.trn-dv2__tag--blue {
  background: #eff4ff;
  color: var(--trn-primary-blue, #0f3395);
  border: 1px solid #c7d7fc;
}
.trn-dv2__tag--pending {
  background: #fff8ec;
  color: #92400e;
  border: 1px solid #fde68a;
}
.trn-dv2__head-byline {
  font-size: 13px;
  color: var(--trn-gray-500, #6b7280);
  margin: 0;
}

/* ── Body layout (legacy — show_v2.php) ── */
.trn-dv2__body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.trn-dv2__thread {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── fullView.php 2-column grid layout ── */
.trn-dv2__layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}
.trn-dv2__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trn-dv2__sidebar {
  flex: 0 0 280px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Flash message ── */
.trn-dv2__flash {
  padding: 10px 16px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 6px;
  font-size: 13px;
  color: #15803d;
}

/* ── State cards (pending / locked) ── */
.trn-dv2__state-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--trn-bg-gray, #fbfbfb);
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 8px;
  color: var(--trn-gray-500, #6b7280);
}
.trn-dv2__state-card--pending {
  background: #fff8ec;
  border-color: #fde68a;
  color: #92400e;
}
.trn-dv2__state-title {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 4px;
  color: inherit;
}
.trn-dv2__state-sub {
  font-size: 13px;
  margin: 0;
  color: inherit;
}
.trn-dv2__state-sub a {
  color: var(--trn-primary-blue, #0f3395);
}

/* ── Empty state (Figma 505-4754) ── */
.trn-dv2__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 24px;
  background: var(--trn-bg-gray, #fbfbfb);
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 8px;
  text-align: center;
}
.trn-dv2__empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--trn-primary-blue, #0f3395);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.trn-dv2__empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--trn-dark-gray, #3c3e40);
  margin: 0;
}
.trn-dv2__empty-sub {
  font-size: 13px;
  color: var(--trn-gray-500, #6b7280);
  margin: 0;
  max-width: 320px;
}
.trn-dv2__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 9px 20px;
  background: var(--trn-primary-blue, #0f3395);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.trn-dv2__empty-cta:hover { background: #0a2575; }

/* ── Messages list ── */
.trn-dv2__messages-wrap {
  position: relative;
}
.trn-dv2__messages-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.00) 100%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  pointer-events: none;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}
.trn-dv2__messages {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  max-height: 580px;
  overflow-y: auto;
}
.trn-dv2__thread {
  border-bottom: 1px solid var(--trn-gray-200, #e5e7eb);
}
.trn-dv2__thread:last-child {
  border-bottom: none;
}
.trn-dv2__thread > .trn-dv2__msg {
  border-bottom: none;
}
.trn-dv2__children {
  margin: 0 0 0 54px;
  border-left: 2px solid #eef2f7;
}
.trn-dv2__thread--reply > .trn-dv2__msg {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ── Single message (Figma 503-4075 others / 503-4080 mine) ── */
.trn-dv2__msg {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--trn-gray-200, #e5e7eb);
  align-items: flex-start;
}
.trn-dv2__msg:last-child { border-bottom: none; }

/* "Mine" — avatar on right, bubble right-aligned */
.trn-dv2__msg--mine {
  flex-direction: row-reverse;
}
.trn-dv2__msg--mine .trn-dv2__msg-body {
  align-items: stretch;
}
.trn-dv2__msg--mine .trn-dv2__msg-header {
  flex-direction: row-reverse;
}
.trn-dv2__msg--mine .trn-dv2__msg-meta {
  align-items: flex-end;
}
.trn-dv2__msg--mine .trn-dv2__msg-text {
  background: #e8edf8;
  color: var(--trn-dark-gray, #3c3e40);
  border-radius: 6px;
}
.trn-dv2__msg--mine .trn-dv2__msg-footer {
  justify-content: flex-end;
}
.trn-dv2__msg--mine .trn-dv2__msg-reply-cap {
  align-self: flex-end;
}
.trn-dv2__msg--mine .trn-dv2__msg-text,
.trn-dv2__msg--mine .trn-dv2__msg-media {
  align-self: stretch;
}

.trn-dv2__msg-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.trn-dv2__msg-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trn-dv2__msg-text,
.trn-dv2__msg-media {
  width: 100%;
  box-sizing: border-box;
}
.trn-dv2__msg-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.trn-dv2__msg-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--trn-dark-gray, #3c3e40);
}
.trn-dv2__msg-time {
  font-size: 11px;
  color: var(--trn-gray-400, #9ca3af);
  flex-shrink: 0;
}
.trn-dv2__msg-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--trn-paragraph, #4c5052);
  margin: 0;
  word-break: break-word;
}
.trn-dv2__msg-media {
  margin-top: 12px;
}
.trn-dv2__attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.trn-dv2__attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  max-width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.trn-dv2__attachment-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 10px rgba(15, 51, 149, 0.08);
}
.trn-dv2__attachment-icon {
  flex-shrink: 0;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--trn-orange-bg, #fff6eb);
  color: var(--trn-orange, #e17903);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.trn-dv2__attachment-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.trn-dv2__attachment-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--trn-dark-gray, #3c3e40);
  word-break: break-word;
}
.trn-dv2__attachment-meta {
  font-size: 12px;
  color: var(--trn-gray-400, #9ca3af);
}
.trn-dv2__msg-media .rtmedia-activity-container {
  display: block;
}
.trn-dv2__msg-media .rtmedia-activity-text {
  margin-bottom: 12px;
}
.trn-dv2__msg-media .rtmedia-activity-text span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--trn-paragraph, #4c5052);
}
.trn-dv2__msg-media .rtmedia-list,
.trn-dv2__msg-media .rtmedia-activity-media-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.trn-dv2__msg-media .rtmedia-list-item {
  list-style: none;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.trn-dv2__msg-media .rtmedia-item-thumbnail {
  background: #f8fafc;
}
.trn-dv2__msg-media .rtmedia-item-thumbnail img,
.trn-dv2__msg-media .rtmedia-item-thumbnail video,
.trn-dv2__msg-media .rtmedia-item-thumbnail audio {
  display: block;
  width: 100%;
  max-width: 100%;
}
.trn-dv2__msg-media .rtmedia-item-title {
  padding: 12px 14px 14px;
}
.trn-dv2__msg-media .rtmedia-item-title h4,
.trn-dv2__msg-media .rtmedia-item-title p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--trn-dark-gray, #3c3e40);
  word-break: break-word;
}
.trn-dv2__msg-media .rtmedia-item-title a {
  color: var(--trn-primary-blue, #0f3395);
  text-decoration: none;
}
.trn-dv2__msg-media .rtmedia-item-title a:hover {
  text-decoration: underline;
}

/* ── Compose box ── */
.trn-dv2__compose {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 16px;
}
.trn-dv2__compose-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.trn-dv2__compose-form { flex: 1 1 0; min-width: 0; }
.trn-dv2__compose-input {
  width: 100%;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-paragraph, #4c5052);
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.trn-dv2__compose-input:focus {
  border-color: var(--trn-primary-blue, #0f3395);
}
.trn-dv2__compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.trn-dv2__compose-hint {
  font-size: 11px;
  color: var(--trn-gray-400, #9ca3af);
}
.trn-dv2__compose-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--trn-primary-blue, #0f3395);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.trn-dv2__compose-submit:hover { background: #0a2575; }

/* ── Sidebar panels ── */
.trn-dv2__panel {
  background: #fff;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 20px;
}
.trn-dv2__panel-title {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--trn-gray-500, #6b7280);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.trn-dv2__panel-count {
  background: var(--trn-gray-200, #e5e7eb);
  color: var(--trn-gray-500, #6b7280);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.trn-dv2__panel-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--trn-paragraph, #4c5052);
  margin: 0 0 14px;
}
.trn-dv2__panel-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--trn-gray-200, #e5e7eb);
}
.trn-dv2__panel-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--trn-gray-400, #9ca3af);
}
.trn-dv2__panel-value {
  font-size: 13px;
  color: var(--trn-dark-gray, #3c3e40);
}

/* ── Members list ── */
.trn-dv2__members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trn-dv2__member {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trn-dv2__member-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.4px;
}
.trn-dv2__member-name {
  font-size: 13px;
  color: var(--trn-dark-gray, #3c3e40);
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trn-dv2__member-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--trn-orange, #e17903);
  background: var(--trn-orange-bg, #fff6eb);
  padding: 1px 6px;
  border-radius: 999px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .trn-dv2__body {
    flex-direction: column;
  }
  .trn-dv2__sidebar {
    flex: none;
    width: 100%;
  }
  .trn-dv2__children {
    margin-left: 20px;
  }
}

.trn-bulk-bar__count {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--trn-gray-500, #6b7280);
  text-transform: uppercase;
}

.trn-bulk-bar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trn-bulk-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 4px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.trn-bulk-bar__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.trn-bulk-bar__btn--approve {
  background: var(--trn-primary-blue, #0f3395);
  color: #fff;
  border: 1.5px solid var(--trn-primary-blue, #0f3395);
}
.trn-bulk-bar__btn--approve:not(:disabled):hover {
  background: #0a2575;
  border-color: #0a2575;
}

.trn-bulk-bar__btn--reject {
  background: #fff;
  color: var(--trn-red-700, #c81e1e);
  border: 1.5px solid var(--trn-gray-200, #e5e7eb);
}
.trn-bulk-bar__btn--reject:not(:disabled):hover {
  border-color: var(--trn-red-700, #c81e1e);
}

/* ── fullView.php overrides & additions ─────────────────────── */

/* Back to Topic — orange (Figma 502-3561) */
.trn-dv2__back {
  color: var(--trn-orange, #e17903) !important;
}
.trn-dv2__back svg path {
  stroke: var(--trn-orange, #e17903);
}

/* Description below tags */
.trn-dv2__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--trn-paragraph, #4c5052);
  margin: 12px 0 0;
  max-width: 680px;
}

/* Message header — meta (name + role) and actions (time + reply) side by side */
.trn-dv2__msg-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.trn-dv2__msg-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.trn-dv2__msg-role {
  font-size: 11px;
  color: var(--trn-gray-400, #9ca3af);
  font-weight: 400;
}
.trn-dv2__msg-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Per-message footer actions (Figma 503-4139) — Reply + Delete */
.trn-dv2__msg-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.trn-dv2__msg-delete-form {
  margin: 0;
  padding: 0;
}
.trn-dv2__msg-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 3px 8px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
}
.trn-dv2__msg-action--reply {
  color: var(--trn-orange, #e17903);
}
.trn-dv2__msg-action--reply:hover {
  background: var(--trn-orange-bg, #fff6eb);
}
.trn-dv2__msg-action--delete {
  color: var(--trn-gray-400, #9ca3af);
}
.trn-dv2__msg-action--delete:hover {
  color: var(--trn-red-700, #c81e1e);
  background: #fff0f0;
}

/* Reply indicator inside compose (Figma 503-4174) */
.trn-dv2__reply-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: #f0f4ff;
  border-left: 3px solid var(--trn-primary-blue, #0f3395);
  border-radius: 0 4px 4px 0;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--trn-gray-500, #6b7280);
}
.trn-dv2__reply-indicator strong {
  color: var(--trn-dark-gray, #3c3e40);
}
.trn-dv2__reply-label {
  font-weight: 600;
}
.trn-dv2__reply-preview {
  flex: 1 1 100%;
  color: var(--trn-gray-500, #6b7280);
  font-style: italic;
  padding-left: 18px;
  word-break: break-word;
}
.trn-dv2__reply-cancel {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--trn-gray-400, #9ca3af);
  margin-left: auto;
  line-height: 1;
}
.trn-dv2__reply-cancel:hover { color: var(--trn-dark-gray, #3c3e40); }

/* Compose footer: attach left, send right */
.trn-dv2__compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
}
.trn-dv2__compose-files {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
}
.trn-dv2__compose-file-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--trn-dark-gray, #3c3e40);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trn-dv2__compose-file-clear {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--trn-primary-blue, #0f3395);
  cursor: pointer;
}
.trn-dv2__compose-validation {
  margin: 10px 0 0;
  font-size: 12px;
  color: #b91c1c;
}

/* Attach button (Figma 503-4086) */
.trn-dv2__compose-attach {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--trn-gray-400, #9ca3af);
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.trn-dv2__compose-attach:hover {
  color: var(--trn-primary-blue, #0f3395);
  background: #f0f4ff;
}

/* Participants sidebar panel (Figma 502-3661) */
.trn-dv2__panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--trn-dark-gray, #3c3e40);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 14px;
}

/* Member info (name + univ_code stacked) */
.trn-dv2__member-info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.trn-dv2__member-univ {
  font-size: 11px;
  color: var(--trn-gray-400, #9ca3af);
}
/* Files list (Figma 503-4313) */
.trn-dv2__files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.trn-dv2__file {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--trn-gray-200, #e5e7eb);
}
.trn-dv2__file:first-child {
  padding-top: 4px;
}
.trn-dv2__file:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.trn-dv2__file-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--trn-orange-bg, #fff6eb);
  color: var(--trn-orange, #e17903);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trn-dv2__file-info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trn-dv2__file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--trn-dark-gray, #3c3e40);
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trn-dv2__file-meta {
  font-size: 11px;
  color: var(--trn-gray-400, #9ca3af);
}
.trn-dv2__file-dl {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: var(--trn-gray-500, #6b7280);
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}
.trn-dv2__file-dl:hover {
  background: #f0f4ff;
  color: var(--trn-primary-blue, #0f3395);
}
.trn-dv2__panel-empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--trn-gray-500, #6b7280);
}

/* Files empty state (Figma 505-4593) */
.trn-dv2__files-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 12px;
  gap: 8px;
}
.trn-dv2__files-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--trn-primary-blue, #0f3395);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.trn-dv2__files-empty-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--trn-dark-gray, #3c3e40);
}
.trn-dv2__files-empty-sub {
  margin: 0;
  font-size: 12px;
  color: var(--trn-gray-500, #6b7280);
  line-height: 1.5;
}

/* Message all participants button (Figma 502-3661) */
.trn-dv2__msg-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 16px;
  padding: 10px 16px;
  background: #fff;
  color: var(--trn-primary-blue, #0f3395);
  border: 1.5px solid var(--trn-primary-blue, #0f3395);
  border-radius: 4px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.trn-dv2__msg-all-btn:hover {
  background: var(--trn-primary-blue, #0f3395);
  color: #fff;
}
.trn-dv2__msg-all-btn:hover svg path {
  stroke: #fff;
}

/* Name + Creator badge row inside a message (Figma 502-3555) */
.trn-dv2__msg-nameline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.trn-dv2__msg-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--trn-orange-bg, #fff6eb);
  color: var(--trn-orange, #e17903);
  border: 1px solid #f5c97a;
  flex-shrink: 0;
}

/* Message text (Figma 503-4075 — flat, no bubble) */
.trn-dv2__msg-text {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f3f4f6;
  color: var(--trn-dark-gray, #3c3e40);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
  max-width: 100%;
}

/* Reply caption (Figma 503-4216) */
.trn-dv2__msg-reply-cap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--trn-gray-400, #9ca3af);
  padding: 2px 8px;
  background: var(--trn-bg-gray, #f3f4f6);
  border-left: 2px solid var(--trn-primary-blue, #0f3395);
  border-radius: 0 3px 3px 0;
  margin-bottom: 3px;
}
.trn-dv2__msg-reply-cap strong {
  color: var(--trn-dark-gray, #3c3e40);
  font-weight: 600;
}
.trn-dv2__msg-reply-preview {
  flex: 0 1 auto;
  padding-left: 0;
  margin-left: 4px;
  color: var(--trn-gray-500, #6b7280);
  font-style: italic;
  word-break: break-word;
}
.trn-dv2__msg--mine .trn-dv2__msg-reply-cap {
  border-left: none;
  border-right: 2px solid var(--trn-primary-blue, #0f3395);
  border-radius: 3px 0 0 3px;
}
.trn-dv2__msg--mine .trn-dv2__msg-reply-preview {
  padding-right: 0;
  text-align: inherit;
}

/* ── Message all participants modal (Figma 506-5051) ── */
.trn-dv2-msg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.trn-dv2-msg-modal-overlay[hidden] { display: none; }

.trn-dv2-msg-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  cursor: pointer;
}

.trn-dv2-msg-modal-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.trn-dv2-msg-modal-card__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--trn-gray-400, #9ca3af);
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.trn-dv2-msg-modal-card__close:hover {
  color: var(--trn-dark-gray, #3c3e40);
  background: var(--trn-bg-gray, #f3f4f6);
}

/* Avatar stack */
.trn-dv2-msg-modal__avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16px;
}
.trn-dv2-msg-modal__av {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.4px;
  border: 2px solid #fff;
  margin-left: -8px;
  flex-shrink: 0;
}
.trn-dv2-msg-modal__av:first-child { margin-left: 0; }
.trn-dv2-msg-modal__av--more {
  background: var(--trn-gray-200, #e5e7eb);
  color: var(--trn-gray-500, #6b7280);
  font-size: 10px;
  border-radius: 4px;
}

.trn-dv2-msg-modal-card__textarea {
  width: 100%;
  border: 1px solid var(--trn-gray-200, #e5e7eb);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 14px;
  color: var(--trn-paragraph, #4c5052);
  resize: vertical;
  min-height: 90px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.trn-dv2-msg-modal-card__textarea:focus {
  border-color: var(--trn-primary-blue, #0f3395);
}

.trn-dv2-msg-modal-card__title {
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--trn-gray-500, #6b7280);
  margin: 0 0 14px;
  line-height: 1.3;
}
.trn-dv2-msg-modal-card__desc {
  font-size: 13px;
  color: var(--trn-gray-500, #6b7280);
  line-height: 1.6;
  margin: 0 0 20px;
}
.trn-dv2-msg-modal-card__desc strong {
  color: var(--trn-dark-gray, #3c3e40);
}
.trn-dv2-msg-modal-card__desc em {
  font-style: normal;
  color: var(--trn-dark-gray, #3c3e40);
}

.trn-dv2-msg-modal-card__actions {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
}
.trn-dv2-msg-modal-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 4px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.trn-dv2-msg-modal-card__btn--cancel {
  background: #fff;
  color: var(--trn-gray-500, #6b7280);
  border-color: var(--trn-gray-200, #e5e7eb);
}
.trn-dv2-msg-modal-card__btn--cancel:hover {
  border-color: var(--trn-gray-400, #9ca3af);
  color: var(--trn-dark-gray, #3c3e40);
}
.trn-dv2-msg-modal-card__btn--send {
  background: var(--trn-primary-blue, #0f3395);
  color: #fff;
  border-color: var(--trn-primary-blue, #0f3395);
}
.trn-dv2-msg-modal-card__btn--send:hover {
  background: #0a2575;
  border-color: #0a2575;
}

/* Sidebar tab navigation (Figma 503-3830) */
.trn-dv2__sidebar-tabs {
  display: flex;
  border-bottom: 2px solid var(--trn-gray-200, #e5e7eb);
  margin-bottom: 16px;
  gap: 0;
}
.trn-dv2__sidebar-tab {
  flex: 1 1 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 8px 4px;
  font-family: var(--trn-font-sans, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--trn-gray-500, #6b7280);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
  white-space: nowrap;
}
.trn-dv2__sidebar-tab:hover {
  color: var(--trn-dark-gray, #3c3e40);
}
.trn-dv2__sidebar-tab.active {
  color: var(--trn-primary-blue, #0f3395);
  border-bottom-color: var(--trn-primary-blue, #0f3395);
}
.trn-dv2__sidebar-panel {
  display: none;
}
.trn-dv2__sidebar-panel.active {
  display: block;
}

/* Responsive: stack layout on mobile */
@media (max-width: 860px) {
  .trn-dv2__layout {
    grid-template-columns: 1fr;
  }
  .trn-dv2__sidebar {
    width: 100%;
    flex: none;
  }
}