/* public/assets/themes/{{ active_theme }}/css/style.css */
@import url("/assets/themes/_shared/css/universal-layout.css");

/* ---------- Base & Reset ---------- */
* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #333;
  background: #fafafa;
}

/* Ensure hidden inputs remain invisible */
input[type="hidden"] {
  display: none !important;
  visibility: hidden !important;
}

/* ───────── GRID GUTTER / CONTAINER ───────── */
:root{ --grid-gutter:12px }
.mhn-shell__container--content{ padding:0; margin-top:20px }              /* space below nav */
.mhn-shell__container{
  width:100%;
  max-width:100%;                        /* full-bleed, matches nav */
  margin-left:0;
  margin-right:0;
  padding-inline:var(--grid-gutter);     /* 12 px grid gutter */
}

.mhn-layout,
.mhn-main-wrapper,
.mhn-main {
  min-width:0;
}

/* ───────── STICKY HEADER (logo + nav) ─────── */
.mhn-header{
  position:sticky; top:0; z-index:999;
  background:#fff;                       /* bar colour                   */
  box-shadow:0 2px 4px rgba(0,0,0,.06);
}

.mhn-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3.5rem;
  padding-block:1rem;
}

.mhn-brand{
  display:flex;
  align-items:center;
  gap:3.5rem;
}

.mhn-app-name {
  margin-left: 5rem;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;          /* ensure it doesn't stretch text */
  color: var(--mhn-accent, #741c73);
}

.mhn-logo {
  height: 34px;
  display: block;
  line-height: 1;          /* ensure it doesn’t stretch text */
}

.mhn-header__actions {
  display:flex;
  align-items:center;
  gap:1.5rem;
}

.mhn-profile,
.mhn-logout-group,
.mhn-profile-group {
  display:flex;
  align-items:center;
  gap:.75rem;
}

.mhn-profile-icon,
.mhn-logout-icon {
  display:inline-flex;
  width:32px;
  height:32px;
}

.mhn-profile-icon img,
.mhn-logout-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 960px) {
  .mhn-header__bar {
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem) 1rem;
  }

  .mhn-brand {
    width:100%;
    min-width:0;
    gap:.75rem;
    justify-content:space-between;
  }

  .mhn-logo-link {
    min-width:0;
    flex:1 1 auto;
  }

  .mhn-logo {
    max-width:min(100%, 16rem);
    height:auto;
  }

  .mhn-app-name {
    margin-left:0;
    flex:0 1 7.5rem;
    font-size:clamp(.95rem, 4.2vw, 1.1rem);
    line-height:1.05;
    overflow-wrap:anywhere;
  }

  .mhn-header__actions {
    width: 100%;
    min-width:0;
    gap:.5rem;
    justify-content: space-between;
  }

  .mhn-profile,
  .mhn-logout-group,
  .mhn-profile-group {
    gap:.5rem;
  }
}

/* -----------------------------------
   Navigation
----------------------------------- */

/* only the *direct* child UL of #mhn-nav is the flex row */
.mhn-navigation #mhn-nav > ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 1rem 0;      /* vertical spacing from header/content */
}

/* top-level LIs */
.mhn-navigation #mhn-nav > ul > li {
  margin-right: 2rem;
  position: relative;
}

/* the links */
.mhn-navigation #mhn-nav > ul > li > a {
  display: inline-block;
  padding: 0.5rem 0;
  color: #575757;
  text-decoration: none;
  font-weight: 700;
  transition: color .2s;

  /* ─── NAV FONT STYLING ─────────────────────────────────── */
  font-family: "Segoe UI", Roboto, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.025em;
  word-spacing: 0.1em;
  text-transform: uppercase;
}

/* hover state */
.mhn-navigation #mhn-nav > ul > li:hover > a {
  color: var(--mhn-accent, #741c73);
}

/* active state */
.mhn-navigation #mhn-nav > ul > li.mhn-active > a {
  color: var(--mhn-accent, #741c73);
  /* border-bottom: 3px solid var(--mhn-accent, #741c73); */
}

/* -------------------------------------------------
   Navigation – active state underline
   ------------------------------------------------- */
.mhn-navigation #mhn-nav > ul > li.mhn-active {
  position: relative;                  /* anchor for the pseudo-bar */
}
/* make every top-level link the anchor for the bar */
.mhn-navigation #mhn-nav > ul > li > a{
  position:relative;              /* anchor */
}

/* underline indicator */
.mhn-navigation #mhn-nav > ul > li > a::after{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:-2px;                    /* sits just under glyphs */
  height:3px;
  background: var(--mhn-accent, #741c73);
  border-radius:3px;
  transform:scaleX(0);
  transition:transform .2s;
}

.mhn-navigation #mhn-nav > ul > li:hover > a::after,
.mhn-navigation #mhn-nav > ul > li.mhn-active > a::after,
.mhn-navigation #mhn-nav > ul > li.mhn-active-ancestor > a::after{
  transform:scaleX(1);
}

/* ─── Submenus ───────────────────── */

/* hide by default */
.mhn-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  min-width: 180px;
  z-index: 10;
  flex-direction: column;  /* ensure vertical children */
}

/* show on hover */
.mhn-navigation #mhn-nav > ul > li.has-children:hover > .mhn-submenu {
  display: block;
}

/* submenu items need relative positioning for nested submenus */
.mhn-submenu li {
  position: relative;
}

/* show nested submenus (level 3+) on hover */
.mhn-submenu li.has-children:hover > .mhn-submenu {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;  /* align with parent item */
}

/* submenu items */
.mhn-submenu li + li {
  border-top: 1px solid #eee;
}
.mhn-submenu > li > a {
  display: block;
  padding: 0.5rem 1rem;
  color: #575757;
  text-decoration: none;
  transition: background .2s, color .2s;

  /* inherit font styling or override as needed */
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.mhn-submenu > li > a:hover {
  background: #f5f5f5;
  color: var(--mhn-accent, #741c73);
}
/* ─────────────────────────────────────────
   RESPONSIVE NAV  +  BURGER  (MOBILE < 768)
─────────────────────────────────────────── */

/* 1 ▸  burger look (unstyle the button) */
.mhn-burger{
  background:none;
  border:0;
  padding:0;
  margin:0;
  line-height:1;
  font-size:1.75rem;       /* ☰ glyph size  */
  cursor:pointer;
  color: var(--mhn-accent, #741c73);
}

/* 2 ▸  hide burger ≥ 768 px */
@media (min-width:768px){
  .mhn-burger{display:none}
}

/* 3 ▸  MOBILE nav collapsed by default          */
/*     – the flex row becomes a vertical block – */
@media (max-width:767.98px){
  .mhn-navigation{margin:0}          /* kill desktop top margin      */
  .mhn-navigation #mhn-nav > ul{
    display:none;                    /* hidden until .is-open added  */
    flex-direction:column;
    gap:0;
  }
  .mhn-navigation #mhn-nav > ul.is-open{
    display:flex;                    /* shown after JS toggle        */
  }
  .mhn-navigation #mhn-nav > ul > li{
    margin:0;
    border-top:1px solid #eee;
  }
  .mhn-navigation #mhn-nav > ul > li > a{
    padding:.75rem 0;
  }
  /* sub-menu opens under its parent, still tap-/hover-driven */
  .mhn-submenu{
    position:static;
    box-shadow:none;
    border-left: 3px solid var(--mhn-accent, #741c73);
    margin-left:1rem;
  }
}
/* ---------- Main ---------- */
.mhn-main {
  margin-bottom: 2rem;
}

/* -----------------------------------
   Panels & Sections
----------------------------------- */
.mhn-panel {
  align-items: left;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}
.mhn-white {
  background: #fff;
}

/* -----------------------------------
   Headings
----------------------------------- */
.mhn-section {
  margin-bottom: var(--spacing-lg, 1rem);
}

:is(h2, h3, h4).mhn-section {
  font-size: var(--section-heading-font-size, var(--font-size-h2, 1.5rem));
  font-weight: var(--section-heading-font-weight, var(--font-weight-semibold, 600));
  line-height: var(--section-heading-line-height, var(--line-height-tight, 1.25));
  letter-spacing: var(--section-heading-letter-spacing, var(--letter-spacing-normal, 0));
  color: var(--section-heading-color, var(--mhn-fg, #222));
  text-transform: var(--section-heading-text-transform, none);
  margin: 0 0 var(--section-heading-gap, var(--spacing-lg, 1rem));
}

.page-title {
  font-size: var(--page-title-font-size, var(--font-size-h1, 2.25rem));
  font-weight: var(--page-title-font-weight, var(--font-weight-bold, 700));
  line-height: var(--page-title-line-height, var(--line-height-tight, 1.25));
  letter-spacing: var(--page-title-letter-spacing, var(--letter-spacing-tight, -0.025em));
  color: var(--page-title-color, var(--mhn-fg, #222));
  margin: 0 0 var(--page-title-gap, 1rem);
  text-transform: var(--page-title-text-transform, none);
}

.page-header {
  margin: 0 0 var(--page-title-gap, 1rem);
}

.page-header .page-title {
  margin-bottom: 0;
}

.page-title + .page-description,
.page-header .page-description {
  margin: var(--page-description-gap, 0.5rem) 0 0;
}

/* -----------------------------------
   Buttons
----------------------------------- */
.mhn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap, 0.5rem);
  min-width: 120px;
  height: auto;
  padding: var(--btn-padding-y, 0.55rem) var(--btn-padding-x, 0.9rem);
  font-size: var(--button-font-size, 0.875rem);
  font-weight: var(--button-font-weight, 600);
  letter-spacing: var(--button-letter-spacing, 0.02em);
  text-transform: var(--button-text-transform, uppercase);
  text-decoration: none;
  border: var(--button-border-width, 1px) solid transparent;
  border-radius: var(--btn-radius, 4px);
  box-shadow: var(--button-shadow, none);
  cursor: pointer;
  text-align: center;
  transition: all var(--button-transition-duration, 150ms) ease-in-out;
  white-space: nowrap;
}

/* Size variants with fixed dimensions */
.mhn-button.mhn-small   { width: 80px; height: 32px; line-height: 32px; font-size: 0.8rem; }
.mhn-button.mhn-large   { width: 160px; height: 48px; line-height: 48px; font-size: 1.1rem; }
.mhn-button.mhn-xl      { width: 200px; height: 56px; line-height: 56px; font-size: 1.2rem; }

/* Special width variants */
.mhn-button.mhn-full    { width: 100%; }
.mhn-button.mhn-square  { width: 40px; } /* square buttons */

.mhn-button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Color variants - using CSS variables where available */
.mhn-button.mhn-blue          { background: var(--button-info-bg, #007bff); color: var(--button-info-fg, #fff); }
.mhn-button.mhn-light-blue    { background: #5bc0de; color: #fff; }
.mhn-button.mhn-green         { background: var(--button-success-bg, #28a745); color: var(--button-success-fg, #fff); }
.mhn-button.mhn-red           { background: var(--button-danger-bg, #dc3545); color: var(--button-danger-fg, #fff); }
.mhn-button.mhn-grey          { background: var(--button-grey-bg, #6c757d); color: var(--button-grey-fg, #fff); }
.mhn-button.mhn-purple        { background: var(--button-purple-bg, #741c73); color: var(--button-purple-fg, #fff); }
.mhn-button.mhn-light-purple  { background: #d03aceff; color: #fff; }

/* Modern button variants (BEM style) - fully configurable via /admin/style */
.mhn-button--primary {
  background: var(--button-primary-bg, var(--mhn-accent));
  color: var(--button-primary-fg, #ffffff);
  border: var(--button-border-width, 1px) solid var(--button-primary-border, var(--mhn-accent));
}
.mhn-button--primary:hover {
  background: var(--button-primary-hover-bg, var(--mhn-focus));
  color: var(--button-primary-hover-fg, #ffffff);
  border-color: var(--button-primary-hover-border, var(--mhn-focus));
}

.mhn-button--secondary {
  background: var(--button-secondary-bg, var(--mhn-surface-1));
  color: var(--button-secondary-fg, var(--mhn-fg));
  border: var(--button-border-width, 1px) solid var(--button-secondary-border, var(--mhn-border));
}
.mhn-button--secondary:hover {
  background: var(--button-secondary-hover-bg, var(--mhn-surface-2));
  color: var(--button-secondary-hover-fg, var(--mhn-fg));
  border-color: var(--button-secondary-hover-border, var(--mhn-border));
}

.mhn-button--danger {
  background: var(--button-danger-bg, var(--mhn-danger, #dc3545));
  color: var(--button-danger-fg, #ffffff);
  border: var(--button-border-width, 1px) solid var(--button-danger-border, var(--mhn-danger, #dc3545));
}
.mhn-button--danger:hover {
  background: var(--button-danger-hover-bg, #BE123C);
  color: var(--button-danger-hover-fg, #ffffff);
  border-color: var(--button-danger-hover-border, #BE123C);
}

.mhn-button--ghost {
  background: var(--button-ghost-bg, transparent);
  color: var(--button-ghost-fg, var(--mhn-accent));
  border: var(--button-border-width, 1px) solid var(--button-ghost-border, transparent);
}
.mhn-button--ghost:hover {
  background: var(--button-ghost-hover-bg, var(--mhn-surface-1));
  color: var(--button-ghost-hover-fg, var(--mhn-accent));
  border-color: var(--button-ghost-hover-border, transparent);
}

.mhn-button--ghost-accent {
  background: var(--button-ghost-accent-bg, transparent);
  color: var(--button-ghost-accent-fg, var(--mhn-accent));
  border: var(--button-border-width, 1px) solid var(--button-ghost-accent-border, transparent);
}
.mhn-button--ghost-accent:hover {
  background: var(--button-ghost-accent-hover-bg, var(--mhn-surface-1));
  color: var(--button-ghost-accent-hover-fg, var(--mhn-focus));
  border-color: var(--button-ghost-accent-hover-border, transparent);
}

.mhn-button--ghost-red {
  background: var(--button-ghost-red-bg, transparent);
  color: var(--button-ghost-red-fg, var(--mhn-danger, #dc3545));
  border: var(--button-border-width, 1px) solid var(--button-ghost-red-border, transparent);
}
.mhn-button--ghost-red:hover {
  background: var(--button-ghost-red-hover-bg, var(--mhn-surface-1));
  color: var(--button-ghost-red-hover-fg, #BE123C);
  border-color: var(--button-ghost-red-hover-border, transparent);
}

.mhn-button--ghost-grey {
  background: var(--button-ghost-grey-bg, transparent);
  color: var(--button-ghost-grey-fg, #6c757d);
  border: var(--button-border-width, 1px) solid var(--button-ghost-grey-border, transparent);
}
.mhn-button--ghost-grey:hover {
  background: var(--button-ghost-grey-hover-bg, var(--mhn-surface-1));
  color: var(--button-ghost-grey-hover-fg, #4B5563);
  border-color: var(--button-ghost-grey-hover-border, transparent);
}
/* -----------------------------------
   Inputs & Forms
----------------------------------- */
.mhn-input {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.mhn-input:focus {
  outline: none;
  border-color: var(--mhn-accent, #741c73);
}

.mhn-input-wide {
  min-width: 12rem;
}

.mhn-code-editor {
  height: 400px;
  border: 1px solid var(--mhn-border);
}

.mhn-code-preview {
  height: 500px;
  border: 1px solid var(--mhn-border);
}

/* -----------------------------------
   Tables
----------------------------------- */
.mhn-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.mhn-table th,
.mhn-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
}
.mhn-striped tbody tr:nth-child(odd) {
  background: #f9f9f9;
}
.mhn-hoverable tbody tr:hover {
  background: #f1f1f1;
}

/* -----------------------------------
   Badges & Tags
----------------------------------- */
.mhn-badge,
.mhn-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.8rem;
  border-radius: 12px;
  color: #fff;
}
.mhn-badge--neutral,
.mhn-badge-muted,
.mhn-badge-light {
  background: var(--badge-neutral-bg, #f0f0f0);
  color: var(--badge-neutral-fg, #666);
  border-color: var(--badge-neutral-border, #e2e8f0);
}

.mhn-badge--success,
.mhn-badge--level-success,
.mhn-badge-success,
.mhn-badge.mhn-success,
.badge-success {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
  border-color: var(--badge-success-border);
}

.mhn-badge--warning,
.mhn-badge-warning,
.mhn-badge.mhn-warning,
.badge-warning {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
  border-color: var(--badge-warning-border);
}

.mhn-badge--info,
.mhn-badge-info,
.mhn-badge.mhn-info,
.badge-info {
  background: var(--badge-info-bg);
  color: var(--badge-info-fg);
  border-color: var(--badge-info-border);
}

.mhn-badge--danger,
.mhn-badge--level-danger,
.mhn-badge-danger,
.mhn-badge.mhn-danger,
.mhn-badge.mhn-red,
.badge-danger,
.badge-error {
  background: var(--badge-danger-bg);
  color: var(--badge-danger-fg);
  border-color: var(--badge-danger-border);
}

.badge-secondary,
.mhn-badge--secondary {
  background: var(--badge-secondary-bg);
  color: var(--badge-secondary-fg);
  border-color: var(--badge-secondary-border);
}

.mhn-badge--subtle {
  background: var(--badge-subtle-bg);
  color: var(--badge-subtle-fg);
  border-color: var(--badge-subtle-border);
}

.mhn-badge--ghost {
  background: var(--badge-ghost-bg);
  color: var(--badge-ghost-fg);
  border-color: var(--badge-ghost-border);
}

.mhn-badge--method-get { background: var(--badge-method-get-bg); color: var(--badge-method-get-fg); border-color: var(--badge-method-get-border); }
.mhn-badge--method-post { background: var(--badge-method-post-bg); color: var(--badge-method-post-fg); border-color: var(--badge-method-post-border); }
.mhn-badge--method-put { background: var(--badge-method-put-bg); color: var(--badge-method-put-fg); border-color: var(--badge-method-put-border); }
.mhn-badge--method-patch { background: var(--badge-method-patch-bg); color: var(--badge-method-patch-fg); border-color: var(--badge-method-patch-border); }
.mhn-badge--method-delete { background: var(--badge-method-delete-bg); color: var(--badge-method-delete-fg); border-color: var(--badge-method-delete-border); }
.mhn-badge--method-options { background: var(--badge-method-options-bg); color: var(--badge-method-options-fg); border-color: var(--badge-method-options-border); }
.mhn-badge--method-head { background: var(--badge-method-head-bg); color: var(--badge-method-head-fg); border-color: var(--badge-method-head-border); }

.mhn-badge--level-debug { background: var(--badge-level-debug-bg); color: var(--badge-level-debug-fg); border-color: var(--badge-level-debug-border); }
.mhn-badge--level-info { background: var(--badge-level-info-bg); color: var(--badge-level-info-fg); border-color: var(--badge-level-info-border); }
.mhn-badge--level-notice { background: var(--badge-level-notice-bg); color: var(--badge-level-notice-fg); border-color: var(--badge-level-notice-border); }
.mhn-badge--level-warning { background: var(--badge-level-warning-bg); color: var(--badge-level-warning-fg); border-color: var(--badge-level-warning-border); }
.mhn-badge--level-error { background: var(--badge-level-error-bg); color: var(--badge-level-error-fg); border-color: var(--badge-level-error-border); }
.mhn-badge--level-critical { background: var(--badge-level-critical-bg); color: var(--badge-level-critical-fg); border-color: var(--badge-level-critical-border); }
.mhn-badge--level-alert { background: var(--badge-level-alert-bg); color: var(--badge-level-alert-fg); border-color: var(--badge-level-alert-border); }
.mhn-badge--level-emergency { background: var(--badge-level-emergency-bg); color: var(--badge-level-emergency-fg); border-color: var(--badge-level-emergency-border); }

.mhn-badge.mhn-purple,
.mhn-tag.mhn-info {
  background: var(--button-purple-bg, #741c73);
}
.mhn-badge.mhn-grey,
.mhn-tag.mhn-info {
  background: var(--button-grey-bg, #717071ff);
}

/* -----------------------------------
   Forms Fieldset & Legend
----------------------------------- */
fieldset {
  margin: 16px 0;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
legend {
  padding: 0 6px;
  font-weight: 600;
}
/* ──────────────────────────────────────────────────────────────
   SESSION COUNTDOWN BADGE (14 px drop)
──────────────────────────────────────────────────────────────── */
.mhn-session-countdown{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.1rem .5rem;
  font-weight:600;
  font-size:.95rem;
  color: var(--mhn-fg, #0F172A);
  background:#ffffff;
  border-radius:.25rem;
  white-space:nowrap;
  text-align:center;
}

/* ──────────────────────────────────────────────────────────────
   BREADCRUMBS
──────────────────────────────────────────────────────────────── */
.mhn-breadcrumbs ol{display:flex;gap:.35rem;font-size:.7rem;list-style:none}
.mhn-breadcrumbs li+li:before{content:"›";margin-right:.35rem;color:var(--mhn-accent, #741c73)}
.mhn-breadcrumbs a{color:var(--mhn-accent, #741c73);text-decoration:none}

/* ───────── Sticky header ───────── */
.mhn-header{
  position:sticky;   /* glue below top edge */
  top:0;
  z-index:999;       /* sits above sub-menus */
  box-shadow:0 2px 4px rgba(0,0,0,.06);  /* subtle drop shadow */
}

/* === THEME VARS START (AUTO-GENERATED) === */
:root{
  --mhn-accent: #800080;
  --mhn-focus: #800080;
  --mhn-success: #16A34A;
  --mhn-warning: #F59E0B;
  --mhn-info: #3B82F6;
  --mhn-danger: #E11D48;
  --mhn-success-bg: #DCFCE7;
  --mhn-success-fg: #166534;
  --mhn-warning-bg: #FEF3C7;
  --mhn-warning-fg: #92400E;
  --mhn-info-bg: #DBEAFE;
  --mhn-info-fg: #1E40AF;
  --mhn-danger-bg: #FEE2E2;
  --mhn-danger-fg: #991B1B;
  --mhn-fg: #0F172A;
  --mhn-muted: #64748B;
  --mhn-border: #E2E8F0;
  --mhn-surface: #FFFFFF;
  --mhn-surface-1: #F2F2F2;
  --mhn-surface-2: #F0F0F0;
  --mhn-hover: #F8FAFC;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-size-base: 16px;
  --line-height-base: 1.5;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --heading-scale: 1.25;
  --page-title-font-size: 2.25rem;
  --page-title-font-weight: 700;
  --page-title-line-height: 1.25;
  --page-title-letter-spacing: -0.025em;
  --page-title-text-transform: none;
  --page-title-color: var(--mhn-accent);
  --page-title-gap: 1.5rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --font-size-h1: 2.25rem;
  --font-size-h2: 1.875rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 4rem;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --btn-radius: 10px;
  --input-radius: 8px;
  --card-radius: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 2px 6px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --btn-padding-y: .55rem;
  --btn-padding-x: .9rem;
  --grid-gutter: 12px;
  --container-max: 1280px;
  --layout-max-width: 1280px;
  --layout-page-padding-x: var(--spacing-2xl);
  --layout-page-padding-y: var(--spacing-xl);
  --layout-section-gap: var(--spacing-2xl);
  --layout-content-gap: var(--spacing-xl);
  --layout-sidebar-width: 320px;
  --layout-shell-background: var(--mhn-surface);
  --layout-header-background: var(--mhn-surface);
  --layout-header-border: var(--mhn-border);
  --layout-header-shadow: var(--shadow-sm);
  --layout-header-padding-y: var(--spacing-md);
  --layout-nav-gap: var(--spacing-lg);
  --layout-nav-padding-y: var(--spacing-sm);
  --layout-breadcrumb-gap: var(--spacing-sm);
  --layout-hero-gap: var(--spacing-lg);
  --layout-page-background: var(--layout-main-background);
  --layout-page-border: 1px solid var(--mhn-border);
  --layout-page-radius: var(--card-radius);
  --layout-page-padding: var(--spacing-xl);
  --layout-page-gap: var(--layout-content-gap);
  --layout-main-background: var(--mhn-surface);
  --flash-radius: var(--card-radius);
  --flash-padding: var(--spacing-lg);
  --dashboard-text-color: var(--body-text-color);
  --dashboard-muted-color: var(--body-text-muted);
  --dashboard-border-color: var(--mhn-border);
  --dashboard-border-strong: var(--mhn-border);
  --dashboard-surface: var(--mhn-surface);
  --dashboard-surface-soft: var(--mhn-surface-1);
  --dashboard-surface-muted: var(--mhn-surface-2);
  --dashboard-hover-bg: var(--mhn-hover);
  --dashboard-accent: var(--mhn-accent);
  --dashboard-accent-strong: var(--mhn-focus);
  --dashboard-page-background: linear-gradient(180deg, var(--mhn-surface-1), transparent);
  --dashboard-spotlight-bg: linear-gradient(135deg, var(--mhn-fg), var(--mhn-accent));
  --dashboard-spotlight-fg: #FFFFFF;
  --dashboard-warning-color: var(--mhn-warning);
  --dashboard-warning-bg: var(--mhn-warning-bg);
  --dashboard-warning-fg: var(--mhn-warning-fg);
  --dashboard-danger-color: var(--mhn-danger);
  --dashboard-danger-bg: var(--mhn-danger-bg);
  --dashboard-danger-fg: var(--mhn-danger-fg);
  --dashboard-success-color: var(--mhn-success);
  --dashboard-success-bg: var(--mhn-success-bg);
  --dashboard-success-fg: var(--mhn-success-fg);
  --dashboard-info-color: var(--mhn-info);
  --dashboard-info-bg: var(--mhn-info-bg);
  --dashboard-info-fg: var(--mhn-info-fg);
  --dashboard-shadow: var(--shadow-lg);
  --dashboard-shadow-hover: var(--shadow-lg);
  --body-text-color: var(--mhn-fg);
  --body-text-muted: var(--mhn-muted);
  --body-text-line-height: var(--line-height-normal);
  --button-font-size: var(--font-size-sm);
  --button-font-weight: var(--font-weight-semibold);
  --button-letter-spacing: 0.02em;
  --button-text-transform: uppercase;
  --button-gap: var(--spacing-sm);
  --button-border-width: 1px;
  --button-shadow: none;
  --button-transition-duration: 150ms;
  --button-primary-bg: var(--mhn-accent);
  --button-primary-fg: #FFFFFF;
  --button-primary-border: var(--mhn-accent);
  --button-primary-hover-bg: var(--mhn-accent);
  --button-primary-hover-fg: #FFFFFF;
  --button-primary-hover-border: var(--mhn-focus);
  --button-secondary-bg: #FFFFFF;
  --button-secondary-fg: #813472;
  --button-secondary-border: #813472;
  --button-secondary-hover-bg: #E0B1D7;
  --button-secondary-hover-fg: #813472;
  --button-secondary-hover-border: var(--mhn-border);
  --button-accent-bg: var(--mhn-accent);
  --button-accent-fg: #FFFFFF;
  --button-accent-border: var(--mhn-accent);
  --button-accent-hover-bg: var(--mhn-focus);
  --button-accent-hover-fg: #FFFFFF;
  --button-accent-hover-border: var(--mhn-focus);
  --button-purple-bg: #8B5CF6;
  --button-purple-fg: #FFFFFF;
  --button-purple-border: #8B5CF6;
  --button-purple-hover-bg: #7C3AED;
  --button-purple-hover-fg: #FFFFFF;
  --button-purple-hover-border: #7C3AED;
  --button-success-bg: #16A34A;
  --button-success-fg: #FFFFFF;
  --button-success-border: #16A34A;
  --button-success-hover-bg: #15803D;
  --button-success-hover-fg: #FFFFFF;
  --button-success-hover-border: #15803D;
  --button-warning-bg: #F59E0B;
  --button-warning-fg: #FFFFFF;
  --button-warning-border: #F59E0B;
  --button-warning-hover-bg: #D97706;
  --button-warning-hover-fg: #FFFFFF;
  --button-warning-hover-border: #D97706;
  --button-info-bg: #3B82F6;
  --button-info-fg: #FFFFFF;
  --button-info-border: #3B82F6;
  --button-info-hover-bg: #2563EB;
  --button-info-hover-fg: #FFFFFF;
  --button-info-hover-border: #2563EB;
  --button-danger-bg: var(--mhn-danger);
  --button-danger-fg: #FFFFFF;
  --button-danger-border: var(--mhn-danger);
  --button-danger-hover-bg: #BE123C;
  --button-danger-hover-fg: #FFFFFF;
  --button-danger-hover-border: #BE123C;
  --button-grey-bg: #6B7280;
  --button-grey-fg: #FFFFFF;
  --button-grey-border: #6B7280;
  --button-grey-hover-bg: #4B5563;
  --button-grey-hover-fg: #FFFFFF;
  --button-grey-hover-border: #4B5563;
  --button-ghost-bg: transparent;
  --button-ghost-fg: var(--mhn-accent);
  --button-ghost-border: #813472;
  --button-ghost-hover-bg: var(--mhn-surface-1);
  --button-ghost-hover-fg: var(--mhn-accent);
  --button-ghost-hover-border: transparent;
  --button-ghost-accent-bg: transparent;
  --button-ghost-accent-fg: var(--mhn-accent);
  --button-ghost-accent-border: var(--mhn-accent);
  --button-ghost-accent-hover-bg: var(--mhn-surface-1);
  --button-ghost-accent-hover-fg: var(--mhn-focus);
  --button-ghost-accent-hover-border: var(--mhn-accent);
  --button-ghost-purple-bg: transparent;
  --button-ghost-purple-fg: #7C3AED;
  --button-ghost-purple-border: transparent;
  --button-ghost-purple-hover-bg: transparent;
  --button-ghost-purple-hover-fg: #6D28D9;
  --button-ghost-purple-hover-border: transparent;
  --button-ghost-success-bg: transparent;
  --button-ghost-success-fg: #16A34A;
  --button-ghost-success-border: transparent;
  --button-ghost-success-hover-bg: transparent;
  --button-ghost-success-hover-fg: #15803D;
  --button-ghost-success-hover-border: transparent;
  --button-ghost-red-bg: transparent;
  --button-ghost-red-fg: var(--mhn-danger);
  --button-ghost-red-border: #FF0000;
  --button-ghost-red-hover-bg: var(--mhn-surface-1);
  --button-ghost-red-hover-fg: #BE123C;
  --button-ghost-red-hover-border: transparent;
  --button-ghost-grey-bg: transparent;
  --button-ghost-grey-fg: #6B7280;
  --button-ghost-grey-border: var(--mhn-accent);
  --button-ghost-grey-hover-bg: var(--mhn-surface-1);
  --button-ghost-grey-hover-fg: #4B5563;
  --button-ghost-grey-hover-border: transparent;
  --badge-font-size: var(--font-size-xs);
  --badge-padding-y: 0.1rem;
  --badge-padding-x: 0.6rem;
  --badge-border-radius: 999px;
  --badge-letter-spacing: 0.08em;
  --badge-font-weight: var(--font-weight-semibold);
  --badge-border: color-mix(in srgb, var(--mhn-border) 0%, transparent);
  --badge-neutral-bg: #808080;
  --badge-neutral-fg: #FFFFFF;
  --badge-method-get-bg: color-mix(in srgb, var(--mhn-info, #0ea5e9) 25%, transparent);
  --badge-method-get-fg: color-mix(in srgb, var(--mhn-info, #0ea5e9) 80%, #000 20%);
  --badge-method-get-border: color-mix(in srgb, var(--mhn-info, #0ea5e9) 40%, var(--badge-border));
  --badge-method-post-bg: color-mix(in srgb, var(--mhn-accent, #4f46e5) 25%, transparent);
  --badge-method-post-fg: color-mix(in srgb, var(--mhn-accent, #4f46e5) 85%, #000 15%);
  --badge-method-post-border: color-mix(in srgb, var(--mhn-accent, #4f46e5) 40%, var(--badge-border));
  --badge-method-put-bg: color-mix(in srgb, var(--mhn-warning, #f59e0b) 30%, transparent);
  --badge-method-put-fg: color-mix(in srgb, var(--mhn-warning, #f59e0b) 70%, #000 30%);
  --badge-method-put-border: color-mix(in srgb, var(--mhn-warning, #f59e0b) 45%, var(--badge-border));
  --badge-method-patch-bg: color-mix(in srgb, var(--mhn-success, #16a34a) 25%, transparent);
  --badge-method-patch-fg: color-mix(in srgb, var(--mhn-success, #16a34a) 70%, #000 30%);
  --badge-method-patch-border: color-mix(in srgb, var(--mhn-success, #16a34a) 40%, var(--badge-border));
  --badge-method-delete-bg: color-mix(in srgb, var(--mhn-danger, #e11d48) 25%, transparent);
  --badge-method-delete-fg: color-mix(in srgb, var(--mhn-danger, #e11d48) 80%, #000 20%);
  --badge-method-delete-border: color-mix(in srgb, var(--mhn-danger, #e11d48) 45%, var(--badge-border));
  --badge-method-options-bg: color-mix(in srgb, var(--body-text-muted, #64748b) 20%, transparent);
  --badge-method-options-fg: color-mix(in srgb, var(--body-text-muted, #64748b) 75%, #000 25%);
  --badge-method-options-border: color-mix(in srgb, var(--body-text-muted, #64748b) 40%, var(--badge-border));
  --badge-method-head-bg: color-mix(in srgb, var(--body-text-muted, #64748b) 22%, transparent);
  --badge-method-head-fg: color-mix(in srgb, var(--body-text-muted, #64748b) 75%, #000 25%);
  --badge-method-head-border: color-mix(in srgb, var(--body-text-muted, #64748b) 40%, var(--badge-border));
  --badge-level-debug-bg: #00A3F0;
  --badge-level-debug-fg: #FFFFFF;
  --badge-level-debug-border: color-mix(in srgb, var(--mhn-info, #3b82f6) 40%, var(--badge-border));
  --badge-level-info-bg: #A4A4FF;
  --badge-level-info-fg: #FFFFFF;
  --badge-level-info-border: color-mix(in srgb, var(--mhn-info, #0ea5e9) 40%, var(--badge-border));
  --badge-level-notice-bg: #00B300;
  --badge-level-notice-fg: #FFFFFF;
  --badge-level-notice-border: color-mix(in srgb, var(--mhn-success, #16a34a) 40%, var(--badge-border));
  --badge-level-warning-bg: #D8B549;
  --badge-level-warning-fg: #FFFFFF;
  --badge-level-warning-border: color-mix(in srgb, var(--mhn-warning, #f59e0b) 40%, var(--badge-border));
  --badge-level-error-bg: #FF0000;
  --badge-level-error-fg: #FFFFFF;
  --badge-level-error-border: color-mix(in srgb, var(--mhn-danger, #e11d48) 45%, var(--badge-border));
  --badge-level-critical-bg: color-mix(in srgb, var(--mhn-danger, #b91c1c) 25%, transparent);
  --badge-level-critical-fg: #FFFFFF;
  --badge-level-critical-border: color-mix(in srgb, var(--mhn-danger, #b91c1c) 50%, var(--badge-border));
  --badge-level-alert-bg: color-mix(in srgb, var(--mhn-danger, #c2410c) 25%, transparent);
  --badge-level-alert-fg: #FFFFFF;
  --badge-level-alert-border: color-mix(in srgb, var(--mhn-danger, #c2410c) 45%, var(--badge-border));
  --badge-level-emergency-bg: color-mix(in srgb, var(--mhn-danger, #9f1239) 30%, transparent);
  --badge-level-emergency-fg: #FFFFFF;
  --badge-level-emergency-border: color-mix(in srgb, var(--mhn-danger, #9f1239) 50%, var(--badge-border));
  --section-heading-font-size: 1.5rem;
  --section-heading-font-weight: 600;
  --section-heading-line-height: 1.3;
  --section-heading-letter-spacing: 0;
  --section-heading-color: var(--mhn-fg);
  --section-heading-text-transform: none;
  --section-heading-gap: 1rem;
}
/* === THEME VARS END (AUTO-GENERATED) === */