/* Marketplace — catalog, Creator Studio, learner journey */

/* Course card — matches .product-card / .content-card styling */
.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(203,213,225,.16);
  border-radius: 22px;
  background: linear-gradient(145deg,rgba(37,99,235,.16),rgba(255,255,255,.035));
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.course-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37,99,235,.7);
  box-shadow: 0 22px 50px rgba(0,0,0,.25);
}
.course-card-media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  margin: 10px;
  border-radius: 15px;
}
.course-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.course-card:hover .course-card-media img {
  transform: scale(1.045);
}
.course-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 9px 18px 18px;
}
.course-card h3 {
  margin: 0 0 8px;
  font: 700 19px/1.2 'Manrope', sans-serif;
}
.course-card p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.course-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  color: #dbeafe;
  font-size: 12px;
  font-weight: 700;
}
.course-card-cta b {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #fff;
  color: #0b1020;
  font-size: 17px;
  transition: transform .25s ease;
}
.course-card:hover .course-card-cta b {
  transform: translateX(4px);
}
.course-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.course-instructor {
  color: #60a5fa;
  font-size: 12px;
  font-weight: 600;
}
.course-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
}
.audience-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(38,217,240,.12);
  color: #67e8f9;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}
.html[data-theme="light"] .course-card {
  background: #fff;
  border-color: var(--brand-light-gray);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
html[data-theme="light"] .course-card p { color: var(--brand-slate); }
html[data-theme="light"] .course-card-cta { color: var(--brand-blue); }
html[data-theme="light"] .course-card-cta b { background: var(--brand-midnight); color: #fff; }

/* Catalog filters */
.mp-filters {
  display: grid;
  gap: 16px;
  margin-bottom: 30px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.03);
}
.mp-filters .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.mp-filters label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.mp-filters select,
.mp-filters input[type="text"],
.mp-filters input[type="number"] {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(7,17,31,.48);
  color: var(--text);
  font-size: 13px;
}
.mp-filters .button { margin: 0; }
.mp-sort { display: flex; align-items: center; gap: 10px; }
.mp-sort label { margin: 0; }
.mp-results-count { color: var(--muted); font-size: 13px; }

/* Course grid */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media(max-width:960px) { .mp-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:720px) { .mp-grid { grid-template-columns: 1fr; } }

/* Progress bar — shared between learner and creator */
.mp-progress-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(157,176,195,.2);
  overflow: hidden;
  margin: 6px 0 12px;
}
.mp-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: width .35s ease;
  width: 0%;
}
.mp-progress-fill.complete {
  background: linear-gradient(90deg, #4ade80, #60a5fa);
}

.mp-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Learner dashboard */
.mp-journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
@media(max-width:720px) { .mp-journey-grid { grid-template-columns: 1fr; } }
.mp-journey-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.03);
}
.mp-journey-card h3 { margin: 0 0 4px; font: 700 18px 'Manrope'; }
.mp-journey-card .mp-journey-count { font: 700 34px 'Manrope'; color: #60a5fa; }
.mp-journey-empty {
  padding: 48px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.02);
}
.mp-journey-empty h3 { margin: 0 0 8px; }
.mp-journey-empty p { color: var(--muted); margin: 0 0 20px; }

.mp-my-courses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media(max-width:960px) { .mp-my-courses { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:720px) { .mp-my-courses { grid-template-columns: 1fr; } }
.mp-my-course-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease;
}
.mp-my-course-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37,99,235,.7);
}
.mp-my-course-card .mp-my-course-media {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.mp-my-course-card .mp-my-course-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-my-course-copy {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.mp-my-course-copy h3 { margin: 0 0 8px; font: 700 17px/1.2 'Manrope'; }
.mp-my-course-copy .mp-my-course-progress { margin: 8px 0; }
.mp-my-course-copy .mp-my-course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  font-size: 12px;
}

/* Continue learning */
.mp-continue {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg,rgba(37,99,235,.16),rgba(255,255,255,.035));
  margin-bottom: 32px;
}
.mp-continue img {
  width: 120px;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 12px;
  flex: 0 0 120px;
}
.mp-continue .mp-continue-body h3 { margin: 0 0 4px; font: 700 19px 'Manrope'; }
.mp-continue .mp-continue-body p { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.mp-continue .button { flex: 0 0 auto; }

/* Course player */
.mp-player-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 34px;
}
@media(max-width:960px) { .mp-player-layout { grid-template-columns: 1fr; } }
.mp-player-video {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px rgba(0,0,0,.3);
}
.mp-player-video iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  border: 0;
}
.mp-player-video .mp-player-placeholder {
  display: grid;
  place-items: center;
  min-height: 280px;
  color: var(--muted);
  font-size: 18px;
  text-align: center;
}
.mp-player-lesson-title { font: 700 26px/1.1 'Manrope'; margin: 0 0 16px; letter-spacing: -.02em; }
.mp-player-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.mp-player-nav .button { min-width: 140px; }

.mp-curriculum-sidebar h3 { margin: 0 0 16px; font: 700 18px 'Manrope'; }
.mp-curriculum-module { margin-bottom: 18px; }
.mp-curriculum-module h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.mp-curriculum-lesson {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(157,176,195,.1);
  font-size: 14px;
}
.mp-curriculum-lesson a {
  color: var(--text);
  text-decoration: none;
  flex: 1;
}
.mp-curriculum-lesson a.active { color: var(--cyan); font-weight: 700; }
.mp-curriculum-lesson .mp-lesson-status {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
}
.mp-lesson-status.pending { background: rgba(157,176,195,.3); color: var(--brand-midnight); }
.mp-lesson-status.complete { background: #4ade80; color: #07111f; }
.mp-lesson-status.current { background: var(--blue); color: #fff; }

/* Lesson resources / notes */
.mp-player-resources {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.mp-resource-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 4px 8px 8px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  font-size: 13px;
  color: var(--text);
}
.mp-resource-link:hover { border-color: var(--blue); background: rgba(37,99,235,.09); }
.mp-player-notes {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.mp-player-notes textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(7,17,31,.48);
  color: var(--text);
  font: inherit;
  padding: 12px 14px;
  resize: vertical;
}
.mp-player-notes textarea:focus { border-color: var(--blue); }
.mp-player-notes .button { margin-top: 12px; }

/* Quiz */
.mp-quiz { padding: 24px 0; }
.mp-quiz h3 { margin: 0 0 16px; }
.mp-quiz .mp-quiz-option {
  display: block;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  transition: border-color .25s, background .25s;
}
.mp-quiz .mp-quiz-option:hover { border-color: var(--blue); background: rgba(37,99,235,.09); }

/* Stats cards */
.mp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media(max-width:720px) { .mp-stats { grid-template-columns: repeat(2, 1fr); } }
.mp-stat-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  text-align: center;
}
.mp-stat-card .mp-stat-value { font: 700 32px 'Manrope'; color: #60a5fa; }
.mp-stat-card .mp-stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }

/* Creator Studio */
.mp-studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.mp-studio-header h1 { margin: 0; font: 700 clamp(32px,4vw,48px)/1.08 'Manrope'; letter-spacing: -.03em; }
.mp-studio-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.mp-studio-nav a {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
}
.mp-studio-nav a:hover { color: var(--cyan); }
.mp-studio-nav a.active { background: rgba(37,99,235,.16); color: #60a5fa; }

.mp-studio-content {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 34px;
}
@media(max-width:960px) { .mp-studio-content { grid-template-columns: 1fr; } }

/* Course edit form */
.mp-form-section {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.025);
  margin-bottom: 24px;
}
.mp-form-section h3 { margin: 0 0 20px; font: 700 20px 'Manrope'; }
.mp-form-grid {
  display: grid;
  gap: 16px;
}
.mp-form-grid .form-group { display: flex; flex-direction: column; gap: 6px; }
.mp-form-grid .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.mp-form-grid .form-group.full { grid-column: 1/-1; }
.mp-form-grid input[type="text"],
.mp-form-grid input[type="number"],
.mp-form-grid input[type="email"],
.mp-form-grid input[type="url"],
.mp-form-grid textarea,
.mp-form-grid select {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(7,17,31,.48);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  width: 100%;
}
.mp-form-grid textarea { resize: vertical; min-height: 100px; }
.mp-form-grid select[multiple] { min-height: 120px; }
.mp-form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.mp-form-actions .button { min-width: 140px; }
.mp-form-actions .button.secondary { min-width: 120px; }

/* Upload zone */
.mp-upload-zone {
  border: 2px dashed var(--line);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  background: rgba(255,255,255,.02);
  transition: border-color .25s;
}
.mp-upload-zone:hover { border-color: var(--blue); }
.mp-upload-zone.dragover { border-color: var(--cyan); background: rgba(38,217,240,.05); }
.mp-upload-zone svg { width: 42px; height: 42px; color: var(--muted); margin-bottom: 12px; }
.mp-upload-status { margin-top: 12px; font-size: 12px; color: var(--muted); }

/* Module / lesson list with drag handles */
.mp-module-list, .mp-lesson-list {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.mp-module-item, .mp-lesson-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.mp-module-item:last-child, .mp-lesson-item:last-child { border-bottom: 0; }
.mp-draggable-handle {
  cursor: move;
  cursor: grab;
  color: var(--muted);
  font-size: 16px;
  padding: 4px 8px;
  flex: 0 0 auto;
}
.mp-module-item .mp-item-title, .mp-lesson-item .mp-item-title { flex: 1; }
.mp-module-item .mp-item-actions, .mp-lesson-item .mp-item-actions { display: flex; gap: 6px; }
.mp-module-item .mp-item-actions a, .mp-lesson-item .mp-item-actions a {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; color: var(--muted); font-size: 13px;
}
.mp-module-item .mp-item-actions a:hover, .mp-lesson-item .mp-item-actions a:hover {
  background: rgba(37,99,235,.09); color: #60a5fa; border: 1px solid var(--blue);
}

/* Status pills */
.mp-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}
.mp-status.draft { background: rgba(157,176,195,.2); color: #9db0c3; }
.mp-status.published { background: rgba(74,222,128,.16); color: #4ade80; }
.mp-status.archived { background: rgba(251,191,36,.16); color: #fbbf24; }

/* Course detail page */
.mp-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 42px;
  align-items: start;
}
@media(max-width:960px) { .mp-detail-grid { grid-template-columns: 1fr; } }
.mp-detail-cover {
  aspect-ratio: 16/10;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0,0,0,.25);
}
.mp-detail-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Curriculum outline on detail page */
.mp-curriculum-detail h3 { margin: 0 0 18px; font: 700 22px 'Manrope'; }
.mp-curriculum-detail .mp-module-item {
  border-radius: 12px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.02);
}
.mp-curriculum-detail .mp-lesson-item { font-size: 13px; }

/* Checkout */
.mp-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, .6fr) 1fr;
  gap: 42px;
}
@media(max-width:960px) { .mp-checkout-layout { grid-template-columns: 1fr; } }
.mp-checkout-summary {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.03);
}

/* Payment method cards */
.mp-payment-options { display: grid; gap: 12px; }
.mp-payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
}
.mp-payment-option input[type="radio"] { flex: 0 0 auto; }
.mp-payment-option .mp-payment-label { flex: 1; font-weight: 600; }

.html[data-theme="light"] .mp-checkout-layout,
html[data-theme="light"] .mp-checkout-summary,
html[data-theme="light"] .mp-form-section,
html[data-theme="light"] .mp-course-card,
html[data-theme="light"] .mp-my-course-card,
html[data-theme="light"] .mp-journey-card,
html[data-theme="light"] .mp-stat-card,
html[data-theme="light"] .mp-module-list,
html[data-theme="light"] .mp-lesson-list,
html[data-theme="light"] .mp-module-item,
html[data-theme="light"] .mp-lesson-item,
html[data-theme="light"] .mp-payment-option,
html[data-theme="light"] .mp-upload-zone,
html[data-theme="light"] .mp-player-notes,
html[data-theme="light"] .mp-player-video {
  background: #fff;
  border-color: var(--brand-light-gray);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
html[data-theme="light"] .mp-checkout-layout p,
html[data-theme="light"] .mp-detail-cover img,
html[data-theme="light"] .mp-my-course-card,
html[data-theme="light"] .mp-form-grid input,
html[data-theme="light"] .mp-form-grid textarea,
html[data-theme="light"] .mp-form-grid select,
html[data-theme="light"] .mp-player-notes textarea,
html[data-theme="light"] .mp-player-video iframe {
  color: var(--brand-midnight);
}
html[data-theme="light"] .mp-stat-card .mp-stat-value { color: var(--brand-blue); }

/* Avatar / profile */
.mp-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #07111f;
  font: 700 18px 'Manrope';
  text-transform: uppercase;
  overflow: hidden;
}
.mp-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Certificate */
.mp-certificate {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px;
  border: 4px double var(--line);
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(145deg, rgba(37,99,235,.08), rgba(38,217,240,.03));
}
.mp-certificate .mp-cert-seal {
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  margin: 0 auto 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font: 700 32px 'Manrope';
}
.mp-certificate h1 { margin: 0 0 24px; font: 700 38px 'Manrope'; letter-spacing: -.03em; }
.mp-certificate .mp-cert-name { font: 700 26px 'Manrope'; margin: 16px 0; }
.mp-certificate .mp-cert-course { color: var(--muted); font-size: 18px; margin: 8px 0 4px; }
.mp-certificate .mp-cert-date { color: var(--muted); font-size: 14px; }
.mp-certificate .button { margin-top: 32px; }
.html[data-theme="light"] .mp-certificate { background: #f4f8fb; border-color: var(--brand-light-gray); }

/* Badges and roadmap */
.mp-badge {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font: 700 20px 'Manrope';
  margin-bottom: 6px;
}
.mp-roadmap {
  position: relative;
  padding: 30px 0;
  margin: 30px 0;
}
.mp-roadmap::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.mp-roadmap-step {
  position: relative;
  margin-left: 54px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mp-roadmap-step:last-child { border-bottom: 0; }
.mp-roadmap-step .mp-roadmap-title { font: 700 15px 'Manrope'; margin: 0 0 4px; }
.mp-roadmap-step .mp-roadmap-sub { color: var(--muted); font-size: 13px; margin: 0; }
.mp-roadmap-step .mp-roadmap-date { color: var(--muted); font-size: 12px; margin-top: 4px; }

.mp-achievements {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.mp-achievement-locked .mp-badge {
  background: rgba(157,176,195,.2);
  color: var(--muted);
}

@media(max-width:720px) {
  .mp-detail-grid { gap: 28px; }
  .mp-checkout-layout { grid-template-columns: 1fr; }
  .mp-cert { padding: 32px 16px; }
}

/* ── Course detail page ───────────────────────── */
.mp-flex { display: flex; gap: 32px; align-items: flex-start; }
.mp-detail-media { flex: 0 0 40%; position: sticky; top: 64px; }
.mp-detail-media img { width: 100%; border-radius: 16px; }
.mp-preview { margin-top: 16px; text-align: center; }
.mp-detail-content { flex: 1; }
.mp-detail-content h1 { margin: 8px 0; font-size: 32px; }
.mp-subtitle { color: var(--muted); font-size: 15px; line-height: 1.6; }
.mp-detail-meta { display: flex; gap: 16px; align-items: center; margin: 16px 0; }
.course-instructor-detail { color: var(--muted); font-size: 13px; }
.course-rating { color: #fbbf24; font-weight: 600; }
.audience-tag { background: rgba(38,217,240,.12); color: var(--cyan); font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.mp-detail-price { margin: 20px 0; }
.mp-detail-price span { color: var(--cyan); font-size: 28px; font-weight: 700; }
.mp-detail-actions { margin: 24px 0; }
.mp-detail-actions .button { margin-right: 8px; }
.mp-detail-section { margin-bottom: 24px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.mp-detail-section:last-child { border-bottom: none; }

/* ── Checkout page ─────────────────────────── */
.mp-checkout { display: flex; gap: 40px; }
.mp-checkout-col { flex: 1; }
.mp-checkout-summary { background: rgba(7,17,31,.48); border-radius: 16px; padding: 24px; }

/* ── Checkout pending page ──────────────────── */
.mp-checkout-complete { max-width: 520px; margin: 0 auto; text-align: center; }
.mp-complete-icon { width: 80px; height: 80px; background: #4ade80; color: #07111f; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 24px; }
.spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--muted); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Password control shared by login and signup while marketplace styles load. */
.password-field { display: block; position: relative; }
.password-field input { padding-right: 48px !important; }
.password-toggle { position: absolute; right: 6px; top: 50%; display: inline-flex; width: 36px; height: 36px; transform: translateY(-50%); align-items: center; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.password-toggle:hover, .password-toggle:focus-visible { background: rgba(79,124,255,.14); color: var(--text); outline: 2px solid transparent; }
.password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mp-audience-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.form-error { color: #ff8e8e; }
.account-panel form p:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 9px; }
.account-panel form p:has(> input[type="checkbox"]) label { margin: 0; }
.account-panel form input[type="checkbox"] { width: auto; min-width: 16px; height: 16px; margin: 0; }

/* ── Learner player ───────────────────────── */
.mp-player-page { display: flex; gap: 32px; }
.mp-player-container { flex: 1 1 65%; }
.mp-player-sidebar { flex: 0 0 35%; }
.mp-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 16px; overflow: hidden; }
.mp-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.mp-lesson-text { line-height: 1.7; }
.mp-text-content { font-size: 16px; line-height: 1.7; }
.mp-text-content h2, .mp-text-content h3 { margin: 20px 0 12px; }
.mp-text-content p { margin: 12px 0; }
.mp-text-content ul, .mp-text-content ol { margin: 12px 0 12px 24px; }
.mp-lesson-placeholder { height: 320px; background: rgba(7,17,31,.48); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.mp-player-meta { margin-bottom: 24px; }
.mp-player-meta .eyebrow { font-size: 11px; text-transform: uppercase; color: var(--muted); }
.mp-quiz-section, .mp-download-section { margin: 24px 0; }
.mp-download-section { padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.mp-player-nav { display: flex; justify-content: space-between; margin-top: 24px; }
.mp-player-nav .button { min-width: 140px; }
.mp-player-nav .button.secondary { margin: 0 4px; }
.mp-player-page .button.secondary { margin: 0 4px; }

/* ── Learner journey page ─────────────────── */
.mp-journey { max-width: 800px; margin: 0 auto; }
.mp-journey .page-hero { text-align: center; }
.mp-course-header { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 32px; }
.mp-course-header img { width: 120px; border-radius: 12px; }
.mp-journey-progress { margin-bottom: 24px; }
.mp-progress-bar-wrap { height: 8px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.mp-progress-bar { height: 100%; background: var(--cyan); border-radius: 999px; }
.mp-module-journey { margin-bottom: 24px; border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: rgba(255,255,255,.02); }
.mp-module-journey h3 { margin: 0 0 16px; }
.mp-module-journey .mp-status { margin-left: 8px; }
.mp-lesson-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; color: var(--text); text-decoration: none; transition: background .2s; }
.mp-lesson-item:hover { background: rgba(255,255,255,.03); }
.mp-lesson-item.active { background: rgba(38,217,240,.1); color: var(--cyan); }
.mp-lesson-order { font-size: 12px; color: var(--muted); min-width: 24px; }
.mp-lesson-title { flex: 1; font-weight: 500; }
.mp-lesson-meta { font-size: 12px; color: var(--muted); }

/* ── Learner dashboard ─────────────────────── */
.mp-journey-empty { text-align: center; padding: 48px 24px; }
.mp-journey-empty h3 { margin: 0 0 12px; }
.mp-journey-empty p { color: var(--muted); margin: 0 0 24px; }

/* ── Certificate page ─────────────────────── */
.mp-certificate { max-width: 800px; margin: 0 auto; }
.mp-certificate-seal { text-align: center; margin-bottom: 32px; }
.mp-certificate-seal img { height: 40px; }
.mp-certificate-body { text-align: center; }
.mp-certificate-body h1 { font-size: 32px; font-family: 'Manrope', sans-serif; margin: 16px 0; }
.mp-certificate-body h3 { font-size: 22px; font-weight: 600; margin: 12px 0; }
.mp-certificate-footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* ── Form helpers ─────────────────────────── */
.mp-form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mp-form-grid .form-group.full { grid-column: 1 / -1; }
.mp-form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.mp-form-section h3 { margin-top: 0; }
.mp-upload-preview { display:block; width:min(100%,360px); aspect-ratio:16/9; margin-top:12px; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
.mp-upload-state { margin-top:8px; color:var(--muted); font-size:13px; }
.mp-notification-link { position:relative; display:inline-flex !important; align-items:center; justify-content:center; }
.mp-notification-link svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.mp-notification-link span { position:absolute; top:-5px; right:-7px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; line-height:18px; text-align:center; }
.mp-unread-badge { display:inline-block; min-width:19px; padding:2px 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; text-align:center; }
.mp-section-heading,.mp-activity-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mp-section-heading h3 { margin:0; }
.mp-activity-row { padding:12px 0; border-bottom:1px solid var(--line); }
.mp-activity-row p { margin:3px 0 0; color:var(--muted); }
.mp-activity-row time { flex:0 0 auto; color:var(--muted); font-size:12px; }
.mp-creator-hero { padding:34px 0 28px!important; }
.mp-creator-shell { padding-top:38px!important; }
.mp-stat-card { position:relative; min-width:0; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.mp-stat-card:hover { transform:translateY(-3px); border-color:rgba(46,125,255,.65); box-shadow:0 18px 38px rgba(0,0,0,.18); }
.mp-stat-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:14px; border-radius:12px; background:rgba(46,125,255,.13); color:#60a5fa; }
.mp-stat-icon svg,.mp-tab-icon svg,.mp-empty-icon svg,.mp-mini-stat svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mp-studio-nav a { gap:8px; border-radius:0; border-bottom:2px solid transparent; }
.mp-studio-nav a.active { border-bottom-color:#2e7dff; background:transparent; }
.mp-tab-icon { display:inline-grid; place-items:center; }
.mp-empty-icon { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 16px; border-radius:18px; background:rgba(46,125,255,.12); color:#60a5fa; }
.mp-payment-connection { display:flex; align-items:center; gap:14px; padding:16px; margin-bottom:18px; border:1px solid var(--line); border-radius:14px; }
.mp-payment-connection>div { flex:1; }.mp-payment-connection p { margin:2px 0 0; color:var(--muted); font-size:13px; }.mp-payment-connection.connected p { color:#4ade80; }
.mp-payment-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:#087ee8; color:#fff; font-weight:800; }
.mp-learning-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:28px; }
.mp-mini-stat { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.mp-mini-stat svg { flex:0 0 24px; color:#60a5fa; }
.mp-mini-stat strong,.mp-mini-stat span { display:block; }
.mp-mini-stat span { color:var(--muted); font-size:12px; }
.mp-xp-card { margin:28px 0; padding:22px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(46,125,255,.08)); }
.mp-xp-track { height:9px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }
.mp-xp-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,#7c3aed,#2e7dff,#26d9f0); }
@media(max-width:900px){.mp-learning-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mp-learning-stats{grid-template-columns:1fr}.mp-creator-hero{padding:26px 0 20px!important}.mp-creator-shell{padding-top:28px!important}}
.mp-chat-creator { width:100%; justify-content:center; margin-top:16px !important; }
.mp-type-filters { display:flex; gap:8px; overflow-x:auto; margin:0 0 28px; padding-bottom:8px; }
.mp-type-filters a { flex:0 0 auto; padding:8px 13px; border:1px solid var(--line); border-radius:999px; color:var(--muted); text-decoration:none; font-size:13px; }
.mp-type-filters a.active { border-color:var(--cyan); color:var(--cyan); background:rgba(38,217,240,.08); }
.mp-learner-welcome { background:radial-gradient(circle at 15% 20%,rgba(139,92,246,.28),transparent 38%),linear-gradient(135deg,rgba(79,70,229,.18),rgba(38,217,240,.06)); }
.mp-resume-card { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; padding:24px; border:1px solid rgba(139,92,246,.45); border-radius:20px; background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(37,99,235,.1)); }
.mp-resume-card h2 { margin:7px 0; }
.mp-player-curriculum { margin:0 0 22px; max-height:300px; overflow-y:auto; border:1px solid var(--line); border-radius:14px; padding:12px; }
.mp-player-curriculum section+section { margin-top:14px; }
.mp-player-curriculum strong { display:block; margin:0 0 6px; font-size:13px; }
.mp-player-curriculum a { display:flex; gap:8px; padding:7px 8px; border-radius:8px; color:var(--muted); text-decoration:none; font-size:13px; }
.mp-player-curriculum a.active { color:var(--cyan); background:rgba(38,217,240,.08); }
.mp-curriculum-toggle { display:none; width:100%; margin-bottom:10px !important; }
.mp-complete-lesson { width:100%; justify-content:center; margin-top:12px; }
.mp-pdf-viewer { width:100%; min-height:70vh; border:1px solid var(--line); border-radius:14px; background:#fff; }
@media(max-width:720px) { .mp-resume-card { flex-direction:column; align-items:stretch; } .mp-resume-card .button { width:100%; justify-content:center; } }
@media(max-width:720px) { .mp-curriculum-toggle { display:flex; } .mp-player-curriculum[hidden] { display:none; } }
[data-content-fields][hidden] { display:none !important; }
.mp-preview-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 28px; padding:20px 24px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(38,217,240,.06)); }
.mp-preview-banner p { margin:6px 0 0; color:var(--muted); }
.mp-form-section { max-width:100%; overflow-x:auto; }
.mp-form-section table { min-width:560px; }

@media (max-width: 960px) {
  .mp-flex, .mp-checkout, .mp-player-page { flex-direction:column; }
  .mp-detail-media, .mp-player-container, .mp-player-sidebar { width:100%; flex:1 1 auto; position:static; }
  .mp-studio-nav { overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
  .mp-studio-nav a { flex:0 0 auto; }
}

@media (max-width: 720px) {
  .mp-studio-header, .mp-preview-banner, .mp-certificate-footer { align-items:stretch; flex-direction:column; }
  .mp-studio-header .button, .mp-preview-banner .button, .mp-form-actions .button { width:100%; justify-content:center; }
  .mp-form-actions { flex-direction:column-reverse; }
  .mp-stats { grid-template-columns:1fr 1fr; gap:10px; }
  .mp-stat-card, .mp-form-section, .mp-checkout-summary { padding:16px; }
  .mp-player-nav { display:grid; grid-template-columns:1fr; gap:10px; }
  .mp-player-nav .button, .mp-player-page .button.secondary { width:100%; min-width:0; margin:0; justify-content:center; }
  .mp-certificate { padding:24px 16px !important; }
  .mp-course-header { flex-direction:column; }
}

@media (max-width: 420px) { .mp-stats { grid-template-columns:1fr; } }

/* ── Progress bar ─────────────────────────── */
.progress-bar-wrap { height: 8px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; width: 100%; }
.progress-bar { height: 100%; background: var(--cyan); border-radius: 999px; transition: width .4s ease; }
.mp-status.published { background: rgba(76,175,80,.15); color: #4ade80; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.mp-status.draft { background: rgba(157,176,195,.2); color: var(--muted); font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.mp-status.archived { background: rgba(255,107,107,.15); color: #ff6b6b; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
/* Creator payout explanation */
.mp-provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}.mp-payout-split{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:10px;align-items:center;margin:18px 0}.mp-payout-split strong{font-size:28px;color:var(--accent)}.mp-payment-guidance{padding:20px;border:1px solid var(--line);border-radius:18px;margin-bottom:24px;background:rgba(64,125,255,.07)}.mp-payment-guidance h2{margin-top:0}.mp-payout-history-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.mp-payout-history-head h2{margin:0}.mp-payout-history-head span{color:var(--muted)}.mp-table-scroll{overflow-x:auto}.mp-table-scroll table{width:100%;border-collapse:collapse}.mp-table-scroll th,.mp-table-scroll td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}
@media(max-width:720px){.mp-provider-grid{grid-template-columns:1fr}.mp-payout-split{grid-template-columns:auto 1fr}.mp-payout-history-head{align-items:flex-start;flex-direction:column}}
/* Commission administration */
.mp-admin-hero h1{display:flex;align-items:center;gap:12px}.mp-admin-hero h1 svg,.mp-admin-section-title svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#60a5fa}.mp-admin-commission{display:grid;gap:24px}.mp-admin-section-title{display:flex;align-items:flex-start;gap:14px}.mp-admin-section-title h2,.mp-admin-section-title p{margin:0}.mp-admin-section-title p{color:var(--muted);margin-top:4px}.mp-fee-form{display:flex;align-items:end;gap:18px;flex-wrap:wrap;margin:22px 0}.mp-fee-form label{display:grid;gap:8px}.mp-percent-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03)}.mp-percent-input:focus-within{border-color:#2e7dff}.mp-percent-input input{width:130px;border:0!important;background:transparent!important}.mp-percent-input b{padding:0 14px;color:var(--muted)}.mp-live-preview{flex:1 1 380px;padding:14px;border-radius:12px;background:rgba(46,125,255,.08);color:var(--muted)}.mp-admin-filters{display:flex;gap:12px;margin:22px 0}.mp-admin-filters input{flex:1}.mp-commission-list,.mp-audit-list{display:grid;gap:10px}.mp-commission-row{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(130px,.6fr) minmax(160px,.7fr) minmax(320px,1.5fr);align-items:center;gap:16px;padding:14px;border:1px solid var(--line);border-radius:14px}.mp-commission-row small,.mp-commission-row strong{display:block}.mp-commission-row em{font-style:normal;color:var(--muted);font-size:12px}.mp-creator-ident{display:flex;align-items:center;gap:12px}.mp-creator-ident>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#2e7dff);font-weight:800}.mp-inline-fee{display:flex;align-items:center;gap:8px}.mp-inline-fee .mp-percent-input input{width:82px}.mp-audit-list>div{display:grid;grid-template-columns:1fr auto auto;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
@media(max-width:980px){.mp-commission-row{grid-template-columns:1fr 1fr}.mp-inline-fee{grid-column:1/-1}}@media(max-width:620px){.mp-admin-filters,.mp-fee-form,.mp-inline-fee{align-items:stretch;flex-direction:column}.mp-commission-row{grid-template-columns:1fr}.mp-inline-fee{grid-column:auto}.mp-percent-input input{width:100%}.mp-audit-list>div{grid-template-columns:1fr}.mp-form-section table{min-width:0}}

/* Creator Studio icon alignment and spacing */
.mp-creator-hero{padding-top:48px!important;padding-bottom:34px!important}.mp-creator-hero h1{font-size:clamp(38px,5vw,64px)}.mp-creator-shell{padding-top:48px!important}.mp-studio-header{min-height:58px;align-items:center}.mp-studio-header .button svg,.mp-form-section .button svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:8px}.mp-stat-card{display:flex;min-height:168px;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px}.mp-stat-icon{margin:0 auto 15px}.mp-stat-card .mp-stat-value{line-height:1.15}.mp-stat-card .mp-stat-label{min-height:20px;display:flex;align-items:center;justify-content:center}.mp-studio-nav{gap:4px;scrollbar-width:thin}.mp-studio-nav a{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:10px 16px;gap:8px}.mp-tab-icon{width:20px;height:20px;flex:0 0 20px}.mp-tab-icon svg{width:20px;height:20px}.mp-nav-count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#2e7dff;color:#fff;font-size:10px}.mp-journey-empty{padding-block:48px}.mp-empty-icon{width:68px;height:68px;margin-bottom:18px}.mp-empty-icon svg{width:26px;height:26px}
@media(max-width:1024px){.mp-creator-hero{padding-top:38px!important}.mp-creator-shell{padding-top:38px!important}.mp-studio-nav a{padding-inline:13px}}
@media(max-width:720px){.mp-creator-hero{padding-top:30px!important;padding-bottom:24px!important}.mp-creator-shell{padding-top:30px!important}.mp-studio-header{gap:16px;margin-bottom:24px}.mp-stat-card{min-height:146px}.mp-studio-nav{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}.mp-studio-nav a{justify-content:flex-start}.mp-journey-empty{padding:34px 18px}}

/* Learner dashboard */
.mp-learner-welcome{padding:54px 0 42px}.mp-learner-welcome h1{font-size:clamp(38px,5vw,64px);margin-bottom:14px}.mp-learning-stat{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:112px;padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}.mp-learning-stat svg{grid-row:1/3;width:48px;height:48px;padding:12px;border-radius:13px;background:rgba(46,125,255,.14);fill:none;stroke:#60a5fa;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mp-learning-stat strong{align-self:end;font:700 25px/1.1 'Manrope';color:#f3f7ff}.mp-learning-stat span{align-self:start;color:var(--muted);font-size:13px}.mp-xp-card{display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:center}.mp-xp-card>div:first-child{display:flex;align-items:baseline;gap:10px}.mp-xp-card>div:first-child strong{font:700 22px 'Manrope';color:#a78bfa}.mp-xp-card>div:first-child span,.mp-xp-card small{color:var(--muted)}.mp-xp-track{grid-column:1/-1;width:100%}.mp-xp-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7c3aed,#2e7dff,#26d9f0)}.mp-card-meta{color:var(--muted);font-size:13px}
html[data-theme="light"] .mp-learning-stat{background:#fff}html[data-theme="light"] .mp-learning-stat strong{color:var(--brand-midnight)}
@media(max-width:600px){.mp-learning-stat{grid-template-columns:42px 1fr;min-height:96px;padding:14px}.mp-learning-stat svg{width:42px;height:42px;padding:10px}.mp-resume-card h2{font-size:26px}.mp-xp-card>div:first-child{align-items:flex-start;flex-direction:column;gap:2px}}

/* Messaging */
.mp-page-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.mp-page-title-row .button svg,.mp-message-composer .button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mp-chat-section{padding-top:48px}.mp-chat-layout{display:grid;grid-template-columns:minmax(300px,390px) 1fr;min-height:520px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.02)}.mp-chat-list-panel{border-right:1px solid var(--line);padding:18px}.mp-panel-heading{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 16px}.mp-panel-heading h2{font-size:20px;margin:0}.mp-panel-heading span{color:var(--muted)}.mp-conversation-card{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:13px 10px;border-radius:13px}.mp-conversation-card:hover{background:rgba(46,125,255,.09)}.mp-conversation-card strong,.mp-conversation-card small{display:block}.mp-conversation-card small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mp-chat-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#2e7dff);font-weight:800}.mp-chat-welcome,.mp-chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--muted)}.mp-chat-welcome svg,.mp-chat-empty svg{width:64px;height:64px;max-width:64px;fill:none;stroke:#60a5fa;stroke-width:1.5}.mp-chat-welcome h2,.mp-chat-empty h2,.mp-chat-empty h3{margin:14px 0 4px;color:var(--text)}.mp-unread-summary{display:inline-block;margin-bottom:14px;padding:5px 10px;border-radius:999px;background:rgba(38,217,240,.13);color:var(--cyan);font-size:12px;font-weight:700}.mp-chat-new{max-width:720px}.mp-chat-new>.mp-back-link{display:inline-block;margin-bottom:18px}.mp-chat-new form{display:grid;gap:20px}.mp-inline-error{padding:12px;border:1px solid #ef4444;border-radius:10px;color:#fca5a5}.mp-chat-detail{max-width:900px}.mp-chat-detail-head{margin-bottom:20px}.mp-chat-person{display:flex;align-items:center;gap:14px;margin-top:18px}.mp-chat-person h1{margin:0;font:700 28px 'Manrope'}.mp-chat-person p{margin:2px 0 0;color:var(--muted)}.mp-message-thread{display:flex;flex-direction:column;gap:10px;height:min(58vh,580px);overflow-y:auto;padding:20px;border:1px solid var(--line);border-radius:18px 18px 0 0;background:rgba(0,0,0,.12)}.mp-message{align-self:flex-start;max-width:min(75%,600px);padding:11px 14px;border-radius:5px 16px 16px;background:rgba(255,255,255,.07)}.mp-message.mine{align-self:flex-end;border-radius:16px 5px 16px 16px;background:rgba(46,125,255,.2)}.mp-message small{color:var(--muted);font-size:11px}.mp-message p{margin:4px 0 0}.mp-message-composer{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px}.mp-message-composer textarea{min-height:52px;max-height:140px;resize:vertical}.mp-message-composer .button{align-self:end}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.mp-page-title-row{align-items:stretch;flex-direction:column}.mp-chat-layout{grid-template-columns:1fr}.mp-chat-list-panel{border-right:0}.mp-chat-welcome{display:none}.mp-message-thread{height:55vh}.mp-message{max-width:88%}.mp-message-composer{grid-template-columns:1fr}.mp-message-composer .button{width:100%}}

/* Creator learning-journey builder */
.mp-course-editor-head,.mp-section-heading,.mp-apply-row{display:flex;align-items:center;justify-content:space-between;gap:24px}.mp-course-editor-head{margin-bottom:24px}.mp-course-editor-head h2,.mp-section-heading h3{margin:0}.mp-editor-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.mp-editor-actions form,.mp-item-actions form{margin:0}.mp-journey-choice{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.mp-journey-choice article{display:flex;gap:15px;padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.mp-journey-choice p,.mp-section-heading p,.mp-apply-row p{margin:5px 0 0;color:var(--muted)}.mp-choice-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:rgba(46,125,255,.14);color:#60a5fa}.mp-choice-icon.ai{background:rgba(124,58,237,.17);color:#a78bfa}.mp-choice-icon svg,.mp-ai-request .button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mp-section-heading{align-items:flex-start;margin-bottom:20px}.mp-section-heading .button{flex:0 0 auto}.mp-learn-stage{display:flex;flex:1;flex-direction:column;gap:3px}.mp-learn-stage small{color:var(--muted)}.mp-item-actions svg,.mp-delete-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mp-delete-btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.mp-delete-btn:hover{background:rgba(239,68,68,.12);color:#f87171}.mp-journey-empty{padding:38px;text-align:center;border:1px dashed var(--line);border-radius:16px}.mp-ai-builder{border-color:rgba(124,58,237,.42);background:linear-gradient(135deg,rgba(124,58,237,.09),rgba(46,125,255,.04))}.mp-ai-badge{padding:7px 11px;border-radius:999px;background:rgba(124,58,237,.16);color:#c4b5fd;font-size:12px;font-weight:700;white-space:nowrap}.mp-ai-request{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 14px;align-items:end}.mp-ai-request label{grid-column:1/-1;font-weight:700}.mp-ai-request textarea,.mp-suggestion-module input,.mp-suggestion-module select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(7,17,31,.7);color:var(--text);font:inherit}.mp-ai-request textarea{resize:vertical}.mp-ai-preview{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}.mp-preview-note{display:flex;flex-direction:column;margin-bottom:15px}.mp-preview-note span{color:var(--muted)}.mp-suggestion-module{margin:0 0 14px;padding:16px;border:1px solid var(--line);border-radius:14px}.mp-suggestion-module legend{padding:0 8px;color:#a78bfa;font-weight:800}.mp-suggestion-module label span{display:block;margin-bottom:7px;font-size:12px;color:var(--muted)}.mp-suggestion-lessons{display:grid;gap:8px;margin-top:12px;padding-left:22px}.mp-suggestion-lessons>div{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:8px}.mp-apply-row{leness-items:flex-end;margin-top:20px}.mp-apply-row p{max-width:650px}html[data-theme="light"] .mp-ai-request textarea,html[data-theme="light"] .mp-suggestion-module input,html[data-theme="light"] .mp-suggestion-module select{background:#fff}
@media(max-width:760px){.mp-course-editor-head,.mp-section-heading,.mp-apply-row{align-items:stretch;flex-direction:column}.mp-editor-actions,.mp-editor-actions .button,.mp-editor-actions form,.mp-editor-actions form .button,.mp-section-heading .button,.mp-apply-row .button{width:100%}.mp-journey-choice{grid-template-columns:1fr}.mp-ai-badge{align-self:flex-start;white-space:normal}.mp-ai-request{grid-template-columns:1fr}.mp-suggestion-lessons{padding-left:0}.mp-suggestion-lessons>div{grid-template-columns:1fr}.mp-module-item{align-items:flex-start;flex-wrap:wrap}.mp-learn-stage{min-width:calc(100% - 55px)}.mp-module-item .mp-item-actions{margin-left:auto}}
.mp-apply-row{align-items:flex-end}
.mp-video-source-head h3{margin:0}.mp-video-source-head p{margin:5px 0 14px;color:var(--muted)}.mp-source-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mp-source-card{display:flex;align-items:flex-start;gap:10px;padding:15px;border:1px solid var(--line);border-radius:14px;cursor:pointer}.mp-source-card.selected{border-color:#3b82f6;background:rgba(46,125,255,.1)}.mp-source-card input{margin-top:4px}.mp-source-card span,.mp-source-card small{display:block}.mp-source-card small{margin-top:4px;color:var(--muted);font-weight:400;line-height:1.45}.mp-checkbox-row{display:flex!important;align-items:center;flex-direction:row!important}.mp-checkbox-row input{width:auto!important}.mp-form-grid [hidden]{display:none!important}@media(max-width:720px){.mp-source-options{grid-template-columns:1fr}}
.mp-duration-fields{display:grid;grid-template-columns:minmax(90px,.75fr) minmax(130px,1.25fr);gap:10px}.mp-form-grid .audience-select{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:10px}.mp-form-grid .audience-select>div{min-width:0}.mp-form-grid .audience-select label{display:flex!important;min-height:48px;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--text);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer}.mp-form-grid .audience-select input{flex:0 0 18px;width:18px!important;height:18px;margin:0}.mp-form-grid .audience-select label:has(input:checked){border-color:#3b82f6;background:rgba(46,125,255,.12)}@media(max-width:900px){.mp-form-grid .audience-select{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.mp-duration-fields{grid-template-columns:1fr}.mp-form-grid .audience-select{grid-template-columns:1fr}}
.mp-editor-actions .button.secondary,.mp-editor-actions button.secondary{color:var(--text)}.mp-lesson-reading{min-height:520px;padding:clamp(24px,4vw,54px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}.mp-lesson-reading h2{margin:0 0 26px;font:700 clamp(28px,4vw,44px)/1.12 'Manrope'}.mp-lesson-reading .mp-text-content{font-size:17px;line-height:1.8;color:#c9d8e7}.mp-lesson-reading .mp-text-content p{margin:0 0 20px}.mp-detail-actions .button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}

/* ── Creator form dark-mode fixes ───────────────────────── */
.mp-form-grid input,
.mp-form-grid select,
.mp-form-grid textarea { color: var(--text); background: var(--surface, #0e1a33); }
.mp-form-grid select option { color: #111; background: #fff; }
.mp-form-grid .audience-select { list-style: none; margin: 0; padding: 0; }
.mp-form-grid .audience-select li { display: flex; align-items: center; gap: 10px; }
.mp-form-grid .audience-select label { margin: 0; }

.mp-form-grid .form-group { min-width: 0; }
.mp-form-grid .mp-price-options { display: flex; flex-wrap: wrap; gap: 16px; }
.mp-form-grid .mp-price-options label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text); }
.mp-form-grid .mp-price-options input { width: auto; margin: 0; flex: none; }
.mp-form-grid .mp-duration-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mp-form-grid .mp-duration-fields > * { min-width: 0; }

/* Creator metadata: predictable columns and native controls beside their text. */
.mp-creator-form .mp-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
.mp-creator-form .mp-price-choice { margin: 0; padding: 0; border: 0; }
.mp-creator-form .mp-price-choice legend { margin-bottom: 10px; color: var(--text); font-size: 14px; font-weight: 600; }
.mp-creator-form .mp-price-options label { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.mp-creator-form .mp-price-options label:has(input:checked) { border-color: #3b82f6; background: rgba(46,125,255,.12); }
.mp-creator-form .mp-form-grid .audience-select { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mp-creator-form .mp-form-grid .audience-select label { justify-content: flex-start; width: 100%; box-sizing: border-box; }
.mp-creator-form .mp-form-grid input[type="checkbox"],
.mp-creator-form .mp-form-grid input[type="radio"] { flex: 0 0 18px; width: 18px !important; height: 18px; margin: 0; accent-color: #3b82f6; }
.mp-creator-form .mp-form-grid input,
.mp-creator-form .mp-form-grid select,
.mp-creator-form .mp-form-grid textarea { box-sizing: border-box; }
.mp-creator-form .mp-form-grid .mp-inline-checkbox { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
@media (max-width: 640px) {
  .mp-creator-form .mp-form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mp-creator-form .mp-form-grid .audience-select { grid-template-columns: minmax(0, 1fr); }
}

/* Creator navigation and consistent course actions. */
.mp-course-flow-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface,#0e1a33)}
.mp-course-flow-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;border-radius:10px;font-size:14px;color:var(--text);text-decoration:none}
.mp-course-flow-nav a:hover,.mp-course-flow-nav a:focus-visible{background:rgba(46,125,255,.14);outline:2px solid #3b82f6;outline-offset:2px}
.mp-editor-actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:10px}.mp-editor-actions form{display:flex;margin:0}.mp-editor-actions .button,.mp-creator-shell .mp-section-heading .button{min-height:46px;padding:10px 18px;line-height:1.3;text-align:center;gap:8px;border-radius:12px;white-space:normal}
.mp-creator-shell .button svg,.mp-creator-shell .mp-item-actions svg{width:18px!important;height:18px!important;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8}
.mp-creator-shell .mp-item-actions{display:flex;align-items:center;gap:8px}.mp-creator-shell .mp-item-actions a,.mp-creator-shell .mp-item-actions button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface,#0e1a33);color:var(--text)}
.mp-onboarding-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}.mp-onboarding-steps article{padding:22px;border:1px solid var(--line);border-radius:16px}.mp-onboarding-steps article>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#245cdc;color:white;font-weight:700}.mp-onboarding-steps h2{font-size:20px;line-height:1.3}.mp-onboarding-steps p{color:var(--muted);font-size:14px}
.mp-preview-stage a{display:inline-block;padding:8px 10px;border-radius:8px;color:var(--text)}.mp-preview-stage a[aria-current=step],.mp-preview-stage a:hover{background:rgba(46,125,255,.15);color:var(--cyan)}
@media(max-width:720px){.mp-onboarding-steps{grid-template-columns:1fr}.mp-course-flow-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.mp-editor-actions{width:100%}.mp-editor-actions>a,.mp-editor-actions>form{flex:1 1 140px}.mp-editor-actions form .button{width:100%}.mp-course-editor-head,.mp-creator-shell .mp-section-heading{align-items:flex-start;gap:18px;flex-direction:column}}

.mp-creator-course-list .course-card-copy{display:flex;flex-direction:column}.mp-course-card-controls{display:grid;gap:14px;margin-top:auto;padding-top:22px;width:100%}.mp-course-card-controls>.mp-status{justify-self:start}.mp-course-primary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mp-course-primary-actions .button{width:100%;min-width:0;min-height:46px;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.3;text-align:center;white-space:normal}.mp-course-more-actions{border-top:1px solid var(--line);padding-top:10px}.mp-course-more-actions summary{padding:10px 0;color:var(--muted);font-size:14px;cursor:pointer}.mp-course-more-actions>a,.mp-course-more-actions button{display:block;width:100%;text-align:left;padding:12px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-size:14px;cursor:pointer;text-decoration:none}.mp-course-more-actions form{margin:0}.mp-course-more-actions>a:hover,.mp-course-more-actions button:hover{background:rgba(46,125,255,.1)}.mp-course-more-actions .mp-danger-action{color:#ff7c88;background:transparent}.mp-course-more-actions .mp-danger-action:hover{background:rgba(255,71,87,.1)}

/* Readable payment controls and creator actions in both themes. */
.mp-checkout .button.secondary,.mp-form-section .button.secondary,.mp-course-flow-nav a{color:var(--text,#eef7ff);background:var(--surface,#142238);border:1px solid var(--line,#52647b)}
.mp-checkout .button.secondary:hover,.mp-form-section .button.secondary:hover{color:var(--text,#eef7ff);border-color:var(--cyan,#42dfff)}
.mp-checkout .button:focus-visible,.mp-course-flow-nav a:focus-visible{outline:3px solid var(--cyan,#42dfff);outline-offset:3px}
#mp-pix .button{margin:8px 8px 0 0;min-height:44px} .mp-creator-next{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:24px;border:1px solid var(--line);border-radius:18px;margin:24px 0} .mp-course-flow-nav a[aria-current=step]{border-color:var(--cyan);font-weight:700}

/* Creator form rhythm and consistent action groups. */
.mp-form-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.mp-form-actions .button{margin:0;min-height:48px;min-width:144px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;line-height:1.35;text-align:center}
.mp-provider-grid .mp-form-section>form{margin-top:20px}.mp-provider-grid .mp-form-section>form+form{padding-top:20px;border-top:1px solid var(--line)}
#mp-pix{display:flex;flex-direction:column;align-items:flex-start;gap:14px}#mp-pix[hidden]{display:none}#mp-pix .button{margin:0;min-height:48px;min-width:200px;display:inline-flex;justify-content:center;align-items:center;padding:12px 22px}#mp-pix textarea{box-sizing:border-box}#mp-pix p,#mp-pix h3{margin:0}
.mp-profile-editor{max-width:860px;margin:28px auto;padding:32px}.mp-profile-editor h1{font-size:clamp(26px,4vw,38px);line-height:1.2;margin:8px 0 16px}.mp-profile-editor header>p:last-child{color:var(--muted);line-height:1.6;max-width:65ch}.mp-profile-editor .form-group{display:flex;flex-direction:column;gap:10px;min-width:0}.mp-profile-photo-row{display:flex;align-items:center;gap:24px;margin:32px 0}.mp-profile-photo-row .form-group{flex:1}.mp-profile-photo{width:96px;height:96px;object-fit:cover;border-radius:50%;flex:0 0 96px}.mp-profile-placeholder{display:grid;place-items:center;background:#163669;color:#fff;font-size:36px}.mp-profile-editor input[type=file]{width:100%;box-sizing:border-box;line-height:1.5;padding:12px;color:var(--text)}.mp-profile-editor input[type=file]::file-selector-button{background:#2455be;color:#fff;border:0;border-radius:8px;padding:10px 14px;margin-right:12px;cursor:pointer}.mp-profile-editor textarea{width:100%;box-sizing:border-box;min-height:180px;padding:16px;line-height:1.6}
@media(max-width:600px){.mp-profile-editor{padding:20px}.mp-profile-photo-row{align-items:flex-start;flex-direction:column;gap:16px}.mp-profile-photo-row .form-group{width:100%}.mp-form-actions{align-items:stretch}.mp-form-actions .button{flex:1 1 100%;width:100%;box-sizing:border-box}#mp-pix .button{width:100%;box-sizing:border-box}}

.mp-student-filters{display:flex;flex-wrap:wrap;align-items:end;gap:16px;margin:24px 0}.mp-student-filters label{display:flex;flex:1 1 220px;flex-direction:column;gap:8px}.mp-student-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}.mp-student-row h2{font-size:20px;margin:0 0 8px}.mp-student-row p{margin:0 0 8px}.mp-student-row small{color:var(--muted)}.mp-student-row .button{min-height:48px;margin:0}@media(max-width:600px){.mp-student-row{align-items:stretch;flex-direction:column;gap:16px}.mp-student-row .button{width:100%}}

.mp-stat-link{color:var(--text);text-decoration:none;transition:border-color .15s,background .15s}.mp-stat-link:hover{border-color:var(--cyan);background:rgba(46,125,255,.12)}.mp-stat-link:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

.mp-preference-option{display:flex;align-items:flex-start;gap:14px;margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:12px;line-height:1.6}.mp-preference-option input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;margin-top:4px}.cookie-notice{position:fixed;bottom:16px;left:16px;z-index:10000;width:min(540px,calc(100vw - 32px));max-height:80vh;overflow:auto;box-sizing:border-box;padding:24px;background:var(--surface,#142238);color:var(--text,#eef7ff);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 40px #0006}.cookie-notice[hidden]{display:none}.cookie-notice h2{font-size:22px;margin:0 0 12px}.cookie-notice p{line-height:1.6}.cookie-notice .button.secondary{color:var(--text,#eef7ff)}

.mp-learning-home{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:24px;margin:24px 0}.mp-next-activity{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}.mp-next-activity h3{font-size:20px;margin:8px 0}.mp-next-activity .button{flex-shrink:0}.mp-learning-tips{padding-left:20px;line-height:1.7}.mp-learning-tips li{margin-bottom:18px}.mp-composer-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.mp-composer-fields input[type=file]{width:100%;box-sizing:border-box}.mp-chat-attachment{max-width:100%;overflow-wrap:anywhere;white-space:normal}@media(max-width:800px){.mp-learning-home{grid-template-columns:1fr}.mp-next-activity{align-items:stretch;flex-direction:column}.mp-message-composer{flex-wrap:wrap}.mp-composer-fields{flex-basis:100%}}

.mp-player-page details{border-bottom:1px solid var(--line);padding:12px 0}.mp-player-page summary{cursor:pointer;padding:12px;line-height:1.5}.mp-player-page summary small{display:block;color:var(--muted)}

footer .button.secondary{color:var(--text,#eef7ff)}.mp-learning-home h2,.mp-next-activity h3,.mp-resume-card h2,.mp-learner-welcome~.section .course-card h3{font-family:inherit}.cookie-notice .mp-form-actions{justify-content:flex-start;margin:16px 0;padding:0;border:0;gap:8px}.cookie-notice .mp-form-actions .button{flex:1 1 130px;min-width:0;min-height:44px;font:inherit;font-size:14px;padding:10px}.mp-composer-fields input[type=file]::file-selector-button{background:#2455be;color:#fff;border:0;border-radius:8px;padding:10px 14px;margin-right:12px}