:root {
  --syn-studio-gap: 1rem;
  --syn-studio-radius: 20px;
  --syn-studio-surface: #ffffff;
  --syn-studio-surface-soft: #f6f4f8;
  --syn-studio-border: rgba(31, 27, 36, 0.08);
  --syn-studio-text: #1f1b24;
  --syn-studio-muted: #6f6775;
  --syn-studio-shadow: 0 10px 28px rgba(20, 14, 24, 0.06);
}


.syn-dashboard,
.syn-section-panel,
.syn-account-panel {
  font-family: inherit;
  color: #1f1b24;
}

.syn-dashboard__title,
.syn-section-panel__title,
.syn-account-panel h2,
.syn-account-panel h3 {
  margin: 0 0 12px;
  line-height: 1.2;
}

.syn-dashboard__intro,
.syn-section-panel__intro {
  margin: 0 0 18px;
  color: #6f6775;
}

/* =========================================================
   PREMIUM DASHBOARD / MODAL TILES
========================================================= */

.syn-dash {
  margin: 0;
  padding: 16px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(75, 49, 83, 0.08);
  box-shadow: 0 10px 28px rgba(20, 14, 24, 0.04);
}

.syn-dash__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.syn-tile.syn-space {
  position: relative;
  min-height: 396px;
  padding: 20px 20px 18px;
  border-radius: 24px;
  border: 1px solid rgba(75, 49, 83, 0.12);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  isolation: isolate;
}

.syn-space::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  z-index: 0;
}

.syn-space::after {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -52px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  opacity: 0.75;
  z-index: 0;
}

.syn-space > * {
  position: relative;
  z-index: 1;
}

.syn-space--studio {
  background: linear-gradient(180deg, #ffffff 0%, #f5eef9 100%);
  border-color: rgba(111, 68, 131, 0.18);
}

.syn-space--studio::before {
  background: linear-gradient(90deg, #6d457e 0%, #8a5ca0 100%);
}

.syn-space--studio::after {
  background: radial-gradient(circle, rgba(138, 92, 160, 0.14) 0%, rgba(138, 92, 160, 0) 70%);
}

.syn-space--library {
  background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
  border-color: rgba(72, 103, 136, 0.18);
}

.syn-space--library::before {
  background: linear-gradient(90deg, #496a88 0%, #6d93b7 100%);
}

.syn-space--library::after {
  background: radial-gradient(circle, rgba(109, 147, 183, 0.14) 0%, rgba(109, 147, 183, 0) 70%);
}

.syn-space__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #6b6270;
}

.syn-space__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .24;
}

.syn-space--studio .syn-space__label { color: #6d457e; }
.syn-space--library .syn-space__label { color: #4b6988; }

.syn-tile__top {
  display: block;
  padding-right: 122px;
  margin: 0 0 16px;
}

.syn-tile__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: .94;
  letter-spacing: -.05em;
  font-weight: 800;
  color: #201b27;
}

.syn-tile__title span {
  display: block;
}

.syn-space .syn-badge {
  position: absolute;
  top: 56px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(75, 49, 83, 0.1);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #6e5a75;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.syn-space .syn-badge.is-on {
  border-color: rgba(108, 72, 132, 0.18);
  background: rgba(108, 72, 132, 0.08);
  color: #6a3e7a;
}

.syn-space .syn-badge.is-off,
.syn-space .syn-badge.is-revoked {
  border-color: rgba(180, 84, 84, 0.16);
  background: rgba(180, 84, 84, 0.06);
  color: #87545c;
}

.syn-space .syn-badge.is-expired {
  border-color: rgba(196, 133, 59, 0.18);
  background: rgba(196, 133, 59, 0.08);
  color: #9a6c2f;
}

.syn-space .syn-badge.is-scheduled {
  border-color: rgba(73, 106, 136, 0.18);
  background: rgba(73, 106, 136, 0.08);
  color: #496a88;
}

.syn-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.syn-dot.is-green { background: #39c77a; }
.syn-dot.is-red { background: #ff6a6a; }
.syn-dot.is-orange { background: #f4a84a; }
.syn-dot.is-blue { background: #5d7fa0; }

.syn-meta {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #5b5560;
}

.syn-meta strong {
  color: #201b27;
  font-weight: 700;
}

.syn-req-wrap {
  margin-top: 14px;
}

.syn-req__toggle {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4b3153;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}

.syn-space--library .syn-req__toggle {
  color: #4b6988;
}

.syn-req__content {
  margin-top: 10px;
}

.syn-req__content[hidden] {
  display: none !important;
}

.syn-req {
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed rgba(75, 49, 83, 0.16);
  color: #6f6775;
  font-size: 13px;
  line-height: 1.6;
}

.syn-req .h {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: #201b27;
}

.syn-chevron {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
  margin-right: 2px;
}

.syn-req-wrap.is-open .syn-chevron {
  transform: rotate(-135deg) translateY(-1px);
}

.syn-dash-cta,
.syn-space .syn-btn,
.syn-space a.syn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 210px;
  min-height: 44px;
  margin: auto auto 0;
  padding: 12px 24px;
  border-radius: 999px;
  background: #563763;
  border: 1px solid #563763;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.syn-space--library .syn-dash-cta,
.syn-space--library .syn-space .syn-btn {
  background: #496a88;
  border-color: #496a88;
}

.syn-dash-cta:hover,
.syn-dash-cta:focus,
.syn-space .syn-btn:hover,
.syn-space .syn-btn:focus {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.syn-space--studio .syn-dash-cta:hover,
.syn-space--studio .syn-dash-cta:focus {
  background: #43294c;
  border-color: #43294c;
}

.syn-space--library .syn-dash-cta:hover,
.syn-space--library .syn-dash-cta:focus {
  background: #35506b;
  border-color: #35506b;
}

/* =========================================================
   GENERIC CARDS / SECTION PANELS
========================================================= */

.syn-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.syn-card-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.syn-card {
  border: 1px solid rgba(21, 31, 51, 0.08);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(25, 34, 57, 0.05);
  display: flex;
  flex-direction: column;
}

.syn-card.is-active {
  border-color: rgba(38, 132, 78, 0.35);
}

.syn-card__media img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.syn-card__body {
  padding: 18px;
}

.syn-card__topline {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.syn-card__topline h3,
.syn-card__topline h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

.syn-card__excerpt,
.syn-card__meta {
  margin: 0 0 12px;
  color: #626b7f;
}

.syn-card__price {
  margin: 0 0 14px;
  font-weight: 700;
  color: #1f2430;
}

.syn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.syn-badge.is-active {
  background: rgba(49, 168, 97, 0.12);
  color: #1e8d53;
}

.syn-badge.is-locked {
  background: rgba(99, 111, 132, 0.12);
  color: #5a6578;
}

.syn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #1f2430;
  background: #1f2430;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: all .2s ease;
}

.syn-btn:hover,
.syn-btn:focus {
  background: #111827;
  color: #fff;
  text-decoration: none;
}

.syn-btn--small {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 12px;
}

.syn-account-panel__section {
  margin-bottom: 26px;
}

.syn-account-panel__header {
  padding: 18px 20px;
  margin-bottom: 24px;
  border-radius: 20px;
  background: #f6f8fb;
}

.syn-account-panel__header p {
  margin: 6px 0 0;
  color: #626b7f;
}

.syn-account-list {
  margin: 0;
  padding-left: 18px;
}

.syn-access-table th,
.syn-access-table td {
  vertical-align: top;
}

@media (max-width: 860px) {
  .syn-dash__grid {
    grid-template-columns: 1fr;
  }

  .syn-tile.syn-space {
    min-height: 0;
  }

  .syn-space .syn-badge {
    position: static;
    margin-bottom: 12px;
  }

  .syn-tile__top {
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .syn-card__media img {
    height: 150px;
  }

  .syn-card__topline {
    flex-direction: column;
  }

  .syn-dash {
    padding: 12px;
    border-radius: 24px;
  }

  .syn-tile.syn-space {
    padding: 18px 16px 16px;
    border-radius: 20px;
  }

  .syn-dash-cta,
  .syn-space .syn-btn {
    min-width: 190px;
    min-height: 42px;
    padding: 12px 18px;
    font-size: 11px;
  }
}


.syn-subscription-plans {
  display: grid;
  gap: 18px;
}

.syn-subscription-plans--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.syn-subscription-plans--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.syn-subscription-plans--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.syn-plan-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  padding: 22px;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .06);
}

.syn-plan-card.is-current {
  border-color: rgba(49, 168, 97, .22);
  box-shadow: 0 18px 48px rgba(49, 168, 97, .10);
}

.syn-plan-card.is-inactive {
  opacity: .72;
}

.syn-plan-card__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.syn-plan-card__title {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.2;
}

.syn-plan-card__grant,
.syn-plan-card__description > p:last-child {
  margin-bottom: 0;
}

.syn-plan-card__grant {
  margin-top: 0;
  color: #64748b;
}

.syn-plan-card__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #f8fafc;
}

.syn-plan-card__price strong {
  font-size: 28px;
  line-height: 1.1;
}

.syn-plan-card__price span {
  color: #64748b;
}

.syn-plan-card__meta,
.syn-plan-card__membership {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.syn-plan-card__meta div,
.syn-plan-card__membership div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(248, 250, 252, .8);
}

.syn-plan-card__meta strong,
.syn-plan-card__membership strong {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #475569;
}

.syn-plan-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.syn-plan-card__actions .syn-btn--ghost {
  background: #fff;
  color: #111827;
}

@media (max-width: 1100px) {
  .syn-subscription-plans--cols-3,
  .syn-subscription-plans--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .syn-subscription-plans--cols-2,
  .syn-subscription-plans--cols-3,
  .syn-subscription-plans--cols-4,
  .syn-plan-card__meta,
  .syn-plan-card__membership,
  .syn-plan-card__head {
    grid-template-columns: 1fr;
    display: grid;
  }

  .syn-plan-card {
    padding: 18px;
    border-radius: 22px;
  }

  .syn-plan-card__price strong {
    font-size: 24px;
  }
}


.syn-dashboard__lead {
  margin: 0 0 18px;
  color: #6f6775;
  font-size: 15px;
  line-height: 1.6;
}

.syn-dash-addon-links {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(75, 49, 83, 0.10);
}

.syn-dash-addon-links__label {
  display: block;
  margin-bottom: 10px;
}

.syn-dash-addon-links__list {
  margin: 0;
  padding-left: 18px;
}

.syn-dash-addon-links__list li {
  margin: 0 0 6px;
}

.syn-dash-addon-links__list li:last-child {
  margin-bottom: 0;
}


/* =========================================================
   STUDIO CATALOG (future-proof frontend contract)
========================================================= */

.syn-studio-catalog {
  font-family: inherit;
  color: #1f1b24;
}

.syn-studio-catalog__header {
  margin: 0 0 18px;
}

.syn-studio-catalog__title {
  margin: 0 0 12px;
  line-height: 1.2;
}

.syn-studio-catalog__intro,
.syn-studio-catalog__empty {
  margin: 0 0 18px;
  color: #6f6775;
}

.syn-studio-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.syn-studio-course {
  position: relative;
}

.syn-studio-course__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.syn-studio-course__media img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.syn-studio-course__title {
  margin: 0;
}

.syn-studio-course__meta-wrap {
  margin: 0 0 14px;
}

.syn-studio-course__actions {
  margin-top: auto;
}

.syn-studio-course__badge.is-scheduled {
  background: rgba(73, 106, 136, 0.12);
  color: #496a88;
}

.syn-studio-course__badge.is-expired {
  background: rgba(196, 133, 59, 0.12);
  color: #9a6c2f;
}

.syn-studio-course__badge.is-active {
  background: rgba(49, 168, 97, 0.12);
  color: #1e8d53;
}

.syn-studio-course__badge.is-locked {
  background: rgba(99, 111, 132, 0.12);
  color: #5a6578;
}

.syn-studio-course[data-state="locked"] .syn-studio-course__cta,
.syn-studio-course[data-state="expired"] .syn-studio-course__cta,
.syn-studio-course[data-state="requires-base-access"] .syn-studio-course__cta {
  align-self: flex-start;
}

.syn-studio-catalog__empty-state {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(75, 49, 83, 0.16);
  background: rgba(255,255,255,0.72);
}

.syn-studio-catalog__empty-state--warning {
  border-style: solid;
  border-color: rgba(196, 133, 59, 0.18);
  background: rgba(196, 133, 59, 0.06);
}

.syn-studio-catalog__empty-title {
  margin: 0 0 8px;
}

.syn-studio-catalog__empty-text {
  margin: 0;
  color: #6f6775;
}

.syn-studio-course--config-warning {
  box-shadow: inset 0 0 0 1px rgba(196, 133, 59, 0.18);
}

.syn-studio-course__config-note {
  color: #87545c;
}

.syn-studio-course__debug {
  margin-top: 12px;
  border-top: 1px dashed rgba(75, 49, 83, 0.12);
  padding-top: 10px;
}

.syn-studio-course__debug summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #5b5560;
}

.syn-studio-course__debug pre {
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(20, 14, 24, 0.04);
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
}


/* =========================================================
   STUDIO CATALOG UI PATCH
========================================================= */
.syn-studio-catalog {
  --syn-studio-gap: 20px;
  --syn-studio-card-radius: 22px;
  --syn-studio-card-border: rgba(21, 31, 51, 0.09);
  --syn-studio-card-shadow: 0 18px 36px rgba(17, 24, 39, 0.06);
  --syn-studio-card-bg: #fff;
  --syn-studio-card-bg-muted: linear-gradient(180deg, #ffffff 0%, #faf9fd 100%);
  --syn-studio-text: #1f1b24;
  --syn-studio-text-muted: #6f6775;
  --syn-studio-surface: #f7f4fb;
  --syn-studio-primary: #1f2430;
  --syn-studio-accent: #6d457e;
  --syn-studio-accent-soft: rgba(109, 69, 126, 0.12);
  --syn-studio-success: #1e8d53;
  --syn-studio-success-soft: rgba(30, 141, 83, 0.12);
  --syn-studio-warning: #9a6c2f;
  --syn-studio-warning-soft: rgba(196, 133, 59, 0.12);
  --syn-studio-locked: #5a6578;
  --syn-studio-locked-soft: rgba(99, 111, 132, 0.12);
  --syn-studio-border-soft: rgba(75, 49, 83, 0.12);
  color: var(--syn-studio-text);
}

.syn-studio-catalog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 24px;
}

.syn-studio-catalog__heading {
  min-width: 0;
}

.syn-studio-catalog__title {
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.syn-studio-catalog__intro {
  max-width: 72ch;
  margin: 0;
  color: var(--syn-studio-text-muted);
}

.syn-studio-catalog__intro > :first-child {
  margin-top: 0;
}

.syn-studio-catalog__intro > :last-child {
  margin-bottom: 0;
}

.syn-studio-catalog__intro p + p {
  margin-top: 0.85em;
}

.syn-studio-catalog__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.syn-studio-catalog__summary-item {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--syn-studio-border-soft);
  background: rgba(255, 255, 255, 0.78);
  color: var(--syn-studio-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.syn-studio-catalog__summary-item--owned {
  background: var(--syn-studio-success-soft);
  color: var(--syn-studio-success);
  border-color: rgba(30, 141, 83, 0.16);
}

.syn-studio-catalog__summary-item--buy {
  background: var(--syn-studio-accent-soft);
  color: var(--syn-studio-accent);
  border-color: rgba(109, 69, 126, 0.16);
}

.syn-studio-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--syn-studio-gap);
}

.syn-studio-course {
  border-radius: var(--syn-studio-card-radius);
  background: var(--syn-studio-card-bg);
  border-color: var(--syn-studio-card-border);
  box-shadow: var(--syn-studio-card-shadow);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.syn-studio-course--variant-accent {
  background: linear-gradient(180deg, rgba(109, 69, 126, 0.07) 0%, rgba(255, 255, 255, 0.98) 44%);
  border-color: rgba(109, 69, 126, 0.18);
}

.syn-studio-course--variant-calm {
  background: linear-gradient(180deg, rgba(73, 106, 136, 0.08) 0%, rgba(255, 255, 255, 0.98) 44%);
  border-color: rgba(73, 106, 136, 0.18);
}

.syn-studio-course--variant-warm {
  background: linear-gradient(180deg, rgba(197, 141, 84, 0.12) 0%, rgba(255, 255, 255, 0.98) 44%);
  border-color: rgba(197, 141, 84, 0.22);
}

.syn-studio-course:hover,
.syn-studio-course:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 24px 42px rgba(17, 24, 39, 0.09);
}

.syn-studio-course__shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.syn-studio-course__media-wrap {
  position: relative;
}

.syn-studio-course__media,
.syn-studio-course__media--placeholder {
  min-height: 188px;
  background: linear-gradient(180deg, #f7f2fb 0%, #ebe4f2 100%);
}

.syn-studio-course__media img {
  display: block;
  width: 100%;
  height: 188px;
  object-fit: cover;
}

.syn-studio-course__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 21, 29, 0.04) 0%, rgba(18, 21, 29, 0.58) 100%);
}

.syn-studio-course__overlay-inner {
  width: 100%;
  padding: 18px;
  color: #fff;
}

.syn-studio-course__overlay-title {
  display: block;
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.25;
}

.syn-studio-course__overlay-text {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.94;
}

.syn-studio-course__overlay--expired {
  background: linear-gradient(180deg, rgba(154, 108, 47, 0.08) 0%, rgba(108, 67, 17, 0.72) 100%);
}

.syn-studio-course__overlay--locked,
.syn-studio-course__overlay--requires-base-access {
  background: linear-gradient(180deg, rgba(36, 43, 58, 0.08) 0%, rgba(36, 43, 58, 0.72) 100%);
}

.syn-studio-course__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 20px;
}

.syn-studio-course__header {
  align-items: flex-start;
  margin-bottom: 0;
}

.syn-studio-course__title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.syn-studio-course__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--syn-studio-text);
}

.syn-studio-course__status {
  flex: 0 0 auto;
}

.syn-studio-course__badge {
  min-height: 30px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.syn-studio-course__badge.is-active {
  background: var(--syn-studio-success-soft);
  color: var(--syn-studio-success);
}

.syn-studio-course__badge.is-locked {
  background: var(--syn-studio-locked-soft);
  color: var(--syn-studio-locked);
}

.syn-studio-course__badge.is-expired {
  background: var(--syn-studio-warning-soft);
  color: var(--syn-studio-warning);
}

.syn-studio-course__badge.is-scheduled {
  background: rgba(73, 106, 136, 0.12);
  color: #496a88;
}

.syn-studio-course__excerpt {
  margin: 0;
  color: var(--syn-studio-text-muted);
}

.syn-studio-course__meta-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.syn-studio-course__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: var(--syn-studio-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.syn-studio-course__meta-item::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(109, 69, 126, 0.24);
  flex: 0 0 auto;
}

.syn-studio-course__meta-item--access::before {
  background: rgba(30, 141, 83, 0.34);
}

.syn-studio-course__meta-item--expired::before {
  background: rgba(154, 108, 47, 0.4);
}

.syn-studio-course__meta-item--requires-base::before {
  background: rgba(99, 111, 132, 0.4);
}

.syn-studio-course__meta-item--scheduled::before {
  background: rgba(73, 106, 136, 0.4);
}

.syn-studio-course__config-note {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(196, 133, 59, 0.18);
  background: rgba(196, 133, 59, 0.08);
  color: #7c5823;
}

.syn-studio-course__footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  padding-top: 4px;
}

.syn-studio-course__price-wrap {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.syn-studio-course__price-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--syn-studio-text-muted);
}

.syn-studio-course__price {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--syn-studio-text);
}

.syn-studio-course__actions {
  margin-top: auto;
}

.syn-studio-course__cta {
  width: 100%;
  justify-content: center;
}

.syn-studio-course__cta--primary,
.syn-studio-course__cta--action-open {
  background: var(--syn-studio-primary);
  border-color: var(--syn-studio-primary);
  color: #fff;
}

.syn-studio-course__cta--accent,
.syn-studio-course__cta--action-buy,
.syn-studio-course__cta--action-continue {
  background: var(--syn-studio-accent);
  border-color: var(--syn-studio-accent);
  color: #fff;
}

.syn-studio-course__cta--warning,
.syn-studio-course__cta--action-renew {
  background: #8b6432;
  border-color: #8b6432;
  color: #fff;
}

.syn-studio-course__cta--muted,
.syn-studio-course__cta--action-none {
  background: #eef1f5;
  border-color: #d8dee8;
  color: #4e596a;
}

.syn-studio-course__debug {
  margin-top: 4px;
  border-top: 1px dashed rgba(75, 49, 83, 0.12);
  padding-top: 12px;
}

.syn-studio-course--owned {
  border-color: rgba(30, 141, 83, 0.18);
}

.syn-studio-course--locked,
.syn-studio-course--requires-base-access {
  background: var(--syn-studio-card-bg-muted);
}

.syn-studio-course--expired {
  border-color: rgba(196, 133, 59, 0.22);
}

.syn-studio-course--config-warning {
  box-shadow: inset 0 0 0 1px rgba(196, 133, 59, 0.2), var(--syn-studio-card-shadow);
}

.syn-studio-catalog__empty-state {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  border-radius: 20px;
  border: 1px dashed var(--syn-studio-border-soft);
  background: rgba(255, 255, 255, 0.82);
}

.syn-studio-catalog__empty-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: rgba(109, 69, 126, 0.08);
}

.syn-studio-catalog__empty-state--warning .syn-studio-catalog__empty-icon {
  background: rgba(196, 133, 59, 0.12);
}

.syn-studio-catalog__empty-body {
  min-width: 0;
}

.syn-studio-catalog__empty-title {
  margin: 0 0 8px;
  font-size: 20px;
}

.syn-studio-catalog__empty-text {
  margin: 0;
  color: var(--syn-studio-text-muted);
}

@media (max-width: 1024px) {
  .syn-studio-catalog__header {
    flex-direction: column;
    align-items: stretch;
  }

  .syn-studio-catalog__summary {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .syn-studio-catalog__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .syn-studio-course__body {
    padding: 18px;
  }

  .syn-studio-course__header {
    flex-direction: column;
    gap: 12px;
  }

  .syn-studio-course__status {
    align-self: flex-start;
  }

  .syn-studio-course__media,
  .syn-studio-course__media img,
  .syn-studio-course__media--placeholder {
    min-height: 168px;
    height: 168px;
  }

  .syn-studio-course__footer {
    gap: 12px;
  }

  .syn-studio-course__cta {
    width: 100%;
  }
}


/* =========================================================
   STUDIO CATALOG OVERRIDE + COPY LAYER READY
========================================================= */
.syn-studio-catalog__intro {
  max-width: 72ch;
}

.syn-studio-catalog__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.syn-studio-catalog__summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--syn-studio-surface-soft);
  border: 1px solid var(--syn-studio-border);
  color: var(--syn-studio-muted);
  font-size: 13px;
  font-weight: 700;
}

.syn-studio-course__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.syn-studio-course__badge-icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  font-size: .85em;
  line-height: 1;
}

.syn-studio-course__badge-icon::before {
  display: block;
}

.syn-studio-course__badge-icon--check::before { content: "✓"; }
.syn-studio-course__badge-icon--lock::before { content: "🔒"; }
.syn-studio-course__badge-icon--clock::before { content: "⏰"; }
.syn-studio-course__badge-icon--calendar::before { content: "🗓"; }
.syn-studio-course__badge-icon--shield::before { content: "🛡"; }

.syn-studio-catalog__empty-state,
.syn-studio-course__config-note {
  border-radius: 16px;
}


/* SWAM Customer Messages */
.swam-customer-message {
  display: block;
  margin: 1rem 0;
}
.swam-customer-message__box {
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
.swam-customer-message__cta {
  transition: opacity .2s ease;
}
.swam-customer-message__cta:hover {
  opacity: .92;
}

/* =========================================================
   SWAM Appearance Module — Tiles
   ========================================================= */
.syn-studio-catalog,
.syn-card,
.syn-studio-course,
.syn-section-panel {
  --swam-tile-accent: #6d457e;
  --swam-tile-accent-hover: #59366a;
  --swam-tile-text: #1f1b24;
  --swam-tile-muted: #6f6775;
  --swam-tile-surface: #f7f4fb;
  --swam-tile-card-bg: #ffffff;
  --swam-tile-border: rgba(21, 31, 51, 0.09);
  --swam-tile-cta-bg: #6d457e;
  --swam-tile-cta-hover: #59366a;
  --swam-tile-cta-text: #ffffff;
  --swam-tile-badge-active-bg: rgba(30, 141, 83, 0.12);
  --swam-tile-badge-active-text: #1e8d53;
  --swam-tile-badge-locked-bg: rgba(99, 111, 132, 0.12);
  --swam-tile-badge-locked-text: #5a6578;
  --swam-tile-radius: 22px;
  --swam-tile-shadow: 0 18px 36px rgba(17, 24, 39, 0.06);
  --swam-tile-gap: 20px;
  --swam-tile-card-padding: 20px;
  --swam-tile-media-height: 188px;
}

.syn-card-grid,
.syn-studio-catalog__grid {
  gap: var(--swam-tile-gap);
}

.syn-card,
.syn-studio-course,
.syn-studio-catalog__empty-state,
.syn-studio-course__config-note,
.syn-card__media,
.syn-studio-course__media,
.syn-studio-course__media--placeholder {
  border-color: var(--swam-tile-border);
  border-radius: var(--swam-tile-radius);
  box-shadow: var(--swam-tile-shadow);
}

.syn-card,
.syn-studio-course,
.syn-studio-catalog__empty-state {
  background: var(--swam-tile-card-bg);
  color: var(--swam-tile-text);
}

.syn-studio-catalog,
.syn-section-panel {
  color: var(--swam-tile-text);
}

.syn-card__body,
.syn-studio-course__body {
  padding: var(--swam-tile-card-padding);
}

.syn-card__media img,
.syn-studio-course__media img,
.syn-studio-course__media,
.syn-studio-course__media--placeholder {
  height: var(--swam-tile-media-height);
  min-height: var(--swam-tile-media-height);
}

.syn-card__topline h3,
.syn-card__topline h4,
.syn-card__price,
.syn-studio-catalog__title,
.syn-studio-course__title,
.syn-studio-course__price,
.syn-studio-catalog__empty-title {
  color: var(--swam-tile-text);
}

.syn-card__excerpt,
.syn-card__meta,
.syn-studio-catalog__intro,
.syn-studio-catalog__summary-item,
.syn-studio-course__excerpt,
.syn-studio-course__meta-item,
.syn-studio-course__price-label,
.syn-studio-catalog__empty-text,
.syn-studio-course__config-note {
  color: var(--swam-tile-muted);
}

.syn-studio-catalog__summary-item,
.syn-studio-catalog__empty-state,
.syn-studio-course__config-note {
  background: var(--swam-tile-surface);
}

.syn-card .syn-btn,
.syn-section-panel .syn-btn,
.syn-studio-course__cta,
.syn-studio-course__cta--primary,
.syn-studio-course__cta--accent,
.syn-studio-course__cta--warning,
.syn-studio-course__cta--muted,
.syn-studio-course__cta--action-open,
.syn-studio-course__cta--action-buy,
.syn-studio-course__cta--action-continue,
.syn-studio-course__cta--action-renew,
.syn-studio-course__cta--action-none {
  background: var(--swam-tile-cta-bg);
  border-color: var(--swam-tile-cta-bg);
  color: var(--swam-tile-cta-text);
}

.syn-card .syn-btn:hover,
.syn-card .syn-btn:focus,
.syn-section-panel .syn-btn:hover,
.syn-section-panel .syn-btn:focus,
.syn-studio-course__cta:hover,
.syn-studio-course__cta:focus,
.syn-studio-course__cta--primary:hover,
.syn-studio-course__cta--primary:focus,
.syn-studio-course__cta--accent:hover,
.syn-studio-course__cta--accent:focus,
.syn-studio-course__cta--warning:hover,
.syn-studio-course__cta--warning:focus,
.syn-studio-course__cta--muted:hover,
.syn-studio-course__cta--muted:focus,
.syn-studio-course__cta--action-open:hover,
.syn-studio-course__cta--action-open:focus,
.syn-studio-course__cta--action-buy:hover,
.syn-studio-course__cta--action-buy:focus,
.syn-studio-course__cta--action-continue:hover,
.syn-studio-course__cta--action-continue:focus,
.syn-studio-course__cta--action-renew:hover,
.syn-studio-course__cta--action-renew:focus,
.syn-studio-course__cta--action-none:hover,
.syn-studio-course__cta--action-none:focus {
  background: var(--swam-tile-cta-hover);
  border-color: var(--swam-tile-cta-hover);
  color: var(--swam-tile-cta-text);
}

.syn-card .syn-badge.is-active,
.syn-studio-course__badge.is-active,
.syn-studio-catalog__summary-item--owned {
  background: var(--swam-tile-badge-active-bg);
  color: var(--swam-tile-badge-active-text);
  border-color: transparent;
}

.syn-card .syn-badge.is-locked,
.syn-studio-course__badge.is-locked {
  background: var(--swam-tile-badge-locked-bg);
  color: var(--swam-tile-badge-locked-text);
  border-color: transparent;
}

.syn-studio-catalog__summary-item--buy {
  background: var(--swam-tile-surface);
  color: var(--swam-tile-accent);
  border-color: var(--swam-tile-border);
}