.mh-sub__btnrow{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.mh-sub__btn{
  border-radius: 999px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--mh-txt-100);
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight: 750;
  cursor:pointer;
}
.mh-sub__btn--ghost{ background: rgba(255,255,255,0.03); color: var(--mh-txt-200); }
.mh-sub__btn--primary{ background: var(--mh-accent-500); border-color: rgba(255,255,255,0.06); }
.mh-sub__btn--primary:hover{ background: var(--mh-accent-400); }
.mh-sub__btn--secondary{ background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); }

.mh-sub__startrow{ display:flex; gap:12px; margin-top: 14px; }
.mh-sub__startrow .mh-sub__btn{ flex:1 1 0; }

.mh-sub__step-line{ font-size: 13px; color: var(--mh-txt-200); margin-top: 6px; }

.mh-sub__gate-row{ margin-top: 12px; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.mh-sub__gate-pill{
  display:flex; gap:6px; align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--mh-txt-200);
  font-weight: 650;
  min-width: 0;
}
.mh-sub__gate-value{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mh-sub__actionchips{ display:flex; gap:10px; margin-top: 12px; flex-wrap:wrap; }

.mh-sub__minirow{ display:flex; gap:12px; margin-top: 14px; }
.mh-sub__mini{
  flex:1 1 0;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
}
.mh-sub__mini-label{ color: var(--mh-txt-400); font-size: 12px; }
.mh-sub__mini-value{ margin-top: 4px; color: var(--mh-txt-200); font-size: 13px; }
.mh-sub__mini--right{ text-align:right; }

/* List / cards (Path, Library, Me) */
.mh-sub__list{ display:flex; flex-direction:column; gap:10px; }
.mh-sub__listrow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 12px;
}
.mh-sub__listrow.is-locked{ opacity: 0.85; }
.mh-sub__listrow-title{ font-weight: 750; }
.mh-sub__listrow-sub{ color: var(--mh-txt-300); font-size: 12px; margin-top: 4px; }
.mh-sub__listrow-left{ min-width:0; }

/* Search + tabs (Library) */
.mh-sub__searchrow{ display:flex; gap:10px; align-items:center; }
.mh-sub__search{
  flex:1 1 auto;
  display:flex; gap:8px; align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.mh-sub__search input{
  width:100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--mh-txt-100);
}
.mh-sub__tabs{ display:flex; gap:10px; margin-top: 12px; }
.mh-sub__tab{
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--mh-txt-200);
  font-weight: 750;
  cursor:pointer;
}
.mh-sub__tab.is-active{
  background: var(--mh-accent-alpha);
  border-color: rgba(255,255,255,0.10);
  color: var(--mh-txt-100);
}
.mh-sub__grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top: 12px; }
.mh-sub__gridcard{
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 14px;
  min-height: 64px;
}
.mh-sub__gridtitle{ font-weight: 800; }
.mh-sub__gridsub{ color: var(--mh-txt-300); font-size: 12px; margin-top: 4px; }

/* Profile head */
.mh-sub__profilehead{ display:flex; gap:12px; align-items:center; }
.mh-sub__avatar{
  width:46px; height:46px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  font-weight: 900;
}
.mh-sub__profilename{ font-size: 16px; font-weight: 850; }

.mh-sub__badge{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--mh-txt-300);
  font-weight: 750;
  font-size: 12px;
}

/* Modals + toast (shared) */
.mh-sub__modal{ position: fixed; inset:0; z-index: 9999; display:flex; align-items:flex-end; justify-content:center; padding: 14px; }
.mh-sub__modal[hidden]{ display:none; }
.mh-sub__modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.65); }
.mh-sub__modal-card{
  position: relative;
  width: min(520px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-shadow);
  padding: 14px;
}
.mh-sub__modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.mh-sub__modal-title{ font-size: 16px; font-weight: 800; }
.mh-sub__modal-body{ color: var(--mh-txt-200); font-size: 13px; }

.mh-sub__slider{ margin-top: 12px; }
.mh-sub__slider-top{ display:flex; align-items:center; justify-content:space-between; }
.mh-sub__slider-label{ color: var(--mh-txt-200); font-weight: 650; }
.mh-sub__slider-badge{ color: var(--mh-txt-100); background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); padding: 4px 10px; border-radius: 999px; font-weight: 750; }
.mh-sub__slider input[type="range"]{ width: 100%; margin-top: 10px; }
.mh-sub__slider-hints{ display:flex; justify-content:space-between; color: var(--mh-txt-400); font-size: 11px; margin-top: 6px; }
.mh-sub__presetrow{ display:flex; gap:10px; margin-top: 14px; flex-wrap:wrap; }
.mh-sub__modal-actions{ display:flex; gap:12px; margin-top: 14px; }
.mh-sub__modal-actions .mh-sub__btn{ flex: 1 1 0; }

.mh-sub__toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  background: rgba(0,0,0,0.70);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--mh-txt-100);
  padding: 10px 12px;
  border-radius: 999px;
  z-index: 10000;
  font-size: 13px;
  box-shadow: var(--mh-shadow);
}

/* Accent modal */
.mh-sub__accentrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
.mh-sub__accent{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--mh-txt-200);
  cursor:pointer;
}
.mh-sub__accent.is-active{
  background: var(--mh-accent-alpha);
  border-color: rgba(255,255,255,0.10);
  color: var(--mh-txt-100);
}
.mh-sub__accent-dot{ width:16px; height:16px; border-radius:999px; }


/* Global accent mapping (applies to section backgrounds + inner UI). */
body.mhosl-accent-red{ --mh-accent-500:#C1123A; --mh-accent-400:#D61A47; --mh-accent-600:#8F0D2A; --mh-accent-alpha: rgba(193,18,58,0.18); }
body.mhosl-accent-orange{ --mh-accent-500:#F97316; --mh-accent-400:#FB923C; --mh-accent-600:#C2410C; --mh-accent-alpha: rgba(249,115,22,0.18); }
body.mhosl-accent-amber{ --mh-accent-500:#D97706; --mh-accent-400:#F59E0B; --mh-accent-600:#B45309; --mh-accent-alpha: rgba(217,119,6,0.18); }
body.mhosl-accent-lemon{ --mh-accent-500:#FACC15; --mh-accent-400:#FDE047; --mh-accent-600:#CA8A04; --mh-accent-alpha: rgba(250,204,21,0.2); }
body.mhosl-accent-lime{ --mh-accent-500:#84CC16; --mh-accent-400:#A3E635; --mh-accent-600:#4D7C0F; --mh-accent-alpha: rgba(132,204,22,0.18); }
body.mhosl-accent-neon{ --mh-accent-500:#22C55E; --mh-accent-400:#4ADE80; --mh-accent-600:#15803D; --mh-accent-alpha: rgba(34,197,94,0.18); }
body.mhosl-accent-emerald{ --mh-accent-500:#10B981; --mh-accent-400:#34D399; --mh-accent-600:#047857; --mh-accent-alpha: rgba(16,185,129,0.18); }
body.mhosl-accent-teal{ --mh-accent-500:#14B8A6; --mh-accent-400:#2DD4BF; --mh-accent-600:#0F766E; --mh-accent-alpha: rgba(20,184,166,0.18); }
body.mhosl-accent-cyan{ --mh-accent-500:#06B6D4; --mh-accent-400:#22D3EE; --mh-accent-600:#0E7490; --mh-accent-alpha: rgba(6,182,212,0.18); }
body.mhosl-accent-ice{ --mh-accent-500:#E0F2FE; --mh-accent-400:#BAE6FD; --mh-accent-600:#0284C7; --mh-accent-alpha: rgba(224,242,254,0.12); }
body.mhosl-accent-sapphire{ --mh-accent-500:#2563EB; --mh-accent-400:#3B82F6; --mh-accent-600:#1D4ED8; --mh-accent-alpha: rgba(37,99,235,0.18); }
body.mhosl-accent-slate{ --mh-accent-500:#64748B; --mh-accent-400:#94A3B8; --mh-accent-600:#334155; --mh-accent-alpha: rgba(100,116,139,0.16); }
body.mhosl-accent-violet{ --mh-accent-500:#6D28D9; --mh-accent-400:#8B5CF6; --mh-accent-600:#4C1D95; --mh-accent-alpha: rgba(109,40,217,0.18); }
body.mhosl-accent-lavender{ --mh-accent-500:#A78BFA; --mh-accent-400:#C4B5FD; --mh-accent-600:#7C3AED; --mh-accent-alpha: rgba(167,139,250,0.18); }
body.mhosl-accent-magenta{ --mh-accent-500:#D946EF; --mh-accent-400:#E879F9; --mh-accent-600:#A21CAF; --mh-accent-alpha: rgba(217,70,239,0.18); }
body.mhosl-accent-pink{ --mh-accent-500:#FB7185; --mh-accent-400:#FDA4AF; --mh-accent-600:#BE123C; --mh-accent-alpha: rgba(251,113,133,0.18); }
body.mhosl-accent-sand{ --mh-accent-500:#E7D3B0; --mh-accent-400:#F3E6CC; --mh-accent-600:#B08968; --mh-accent-alpha: rgba(231,211,176,0.16); }
body.mhosl-accent-cocoa{ --mh-accent-500:#7C4A2D; --mh-accent-400:#A1623A; --mh-accent-600:#4E2A1A; --mh-accent-alpha: rgba(124,74,45,0.16); }

.mh-sub__accent-dot--red{ background:#C1123A; }
.mh-sub__accent-dot--orange{ background:#FF8A1F; }
.mh-sub__accent-dot--amber{ background:#D4A017; }
.mh-sub__accent-dot--lemon{ background:#FFF200; }
.mh-sub__accent-dot--lime{ background:#7AC51D; }
.mh-sub__accent-dot--neon{ background:#39FF14; }
.mh-sub__accent-dot--emerald{ background:#0F766E; }
.mh-sub__accent-dot--teal{ background:#14B8A6; }
.mh-sub__accent-dot--cyan{ background:#0891B2; }
.mh-sub__accent-dot--ice{ background:#D9F2FF; }
.mh-sub__accent-dot--sapphire{ background:#1D4ED8; }
.mh-sub__accent-dot--slate{ background:#64748B; }
.mh-sub__accent-dot--violet{ background:#7C3AED; }
.mh-sub__accent-dot--lavender{ background:#C4B5FD; }
.mh-sub__accent-dot--magenta{ background:#C026D3; }
.mh-sub__accent-dot--pink{ background:#FF7AB6; }
.mh-sub__accent-dot--sand{ background:#F5E6C8; }
.mh-sub__accent-dot--cocoa{ background:#8B5A2B; }



/* Path: locked teaser rows */
.mh-sub__listrow--locked{
  opacity: 0.62;
  cursor: not-allowed;
}
.mh-sub__listrow--locked:focus{
  outline: 2px solid rgba(255,255,255,0.10);
  outline-offset: 2px;
}


/* Path: current card */
.mh-sub__kelias-current{ margin-top: 10px; }
.mh-sub__kelias-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.mh-sub__kelias-lvl{ font-size:18px; font-weight:850; }
.mh-sub__kelias-meta{ color: var(--mh-txt-300); font-size: 12px; }
.mh-sub__kelias-actions{ display:flex; gap:10px; margin-top: 12px; justify-content:flex-end; }

/* Completed chips row */
.mh-sub__chiprow{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }

/* Locked teaser rows */
.mh-sub__listrow--locked{ opacity: 0.62; cursor: not-allowed; }

/* Level details */
.mh-sub__backlink{ display:inline-block; color: var(--mh-txt-300); text-decoration:none; font-size: 13px; }
.mh-sub__backlink:hover{ color: var(--mh-txt-200); text-decoration: underline; }
.mh-sub__kv{ display:flex; flex-direction:column; gap:10px; }
.mh-sub__kv-row{ display:flex; gap:12px; align-items:flex-start; }
.mh-sub__kv-k{ width: 90px; flex:0 0 auto; color: var(--mh-txt-400); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.mh-sub__kv-v{ color: var(--mh-txt-200); font-size: 13px; line-height: 1.45; }

.mh-sub__steps{ margin: 0; padding-left: 18px; color: var(--mh-txt-200); }
.mh-sub__steps li{ margin: 8px 0; }

/* Level Details: progress */
.mh-sub__progresscard{
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 12px;
}
.mh-sub__progresshead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.mh-sub__progresspct{
  font-weight: 850;
}