/* ==========================================================================
   main.css
   Universal Multi‑Purpose Design System — Project-Agnostic Core
   Themes: gold (default), light, navy
   Includes: themes, utilities, layouts, navigation, forms, data display,
   selection systems, workflows, documentation, workspaces, overlays, media,
   administrative data tools, enhanced fields, accessible comboboxes, repeaters,
   accessibility, RTL, responsive behaviour, print and JavaScript integration.
   ========================================================================== */

/* ---------- 1. RESET & BASE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--clr-text);
  background-color: var(--clr-bg);
  transition: background-color 0.3s, color 0.3s;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--clr-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ---------- 2. DESIGN TOKENS & THEMES ---------- */
:root {
  /* Core three-colour brand palette */
  --mp-gold: #C9A86A;
  --mp-gold-rgb: 201, 168, 106;
  --mp-gold-light: #D9C18F;
  --mp-gold-dark: #9E7D42;

  --mp-navy: #0E1B2C;
  --mp-navy-rgb: 14, 27, 44;
  --mp-navy-light: #1A2D44;
  --mp-navy-dark: #060D16;

  --mp-teal: #0AA0A6;
  --mp-teal-rgb: 10, 160, 166;
  --mp-teal-light: #21D4D4;
  --mp-teal-dark: #066A70;

  /* Gold is the default theme when data-theme is absent. */
  --hue: 42;
  --sat: 52%;

  --clr-primary: var(--mp-gold);
  --clr-primary-hover: var(--mp-gold-dark);
  --clr-primary-light: rgba(var(--mp-gold-rgb), 0.18);
  --clr-primary-text: var(--mp-navy);

  --clr-bg: #F7F4ED;
  --clr-surface: #FFFEFB;
  --clr-text: var(--mp-navy);
  --clr-text-light: #59687A;
  --clr-muted: #B7AD99;
  --clr-border: rgba(var(--mp-navy-rgb), 0.16);
  --clr-border-light: rgba(var(--mp-navy-rgb), 0.08);

  /* Semantic state colours remain functional and are not selectable themes. */
  --clr-success: #23855F;
  --clr-warning: #C77C12;
  --clr-danger: #C44949;
  --clr-info: var(--mp-teal);

  --shadow-xs: 0 1px 2px rgba(var(--mp-navy-rgb), 0.04);
  --shadow-sm: 0 1px 3px rgba(var(--mp-navy-rgb), 0.10);
  --shadow-md: 0 4px 6px -1px rgba(var(--mp-navy-rgb), 0.10), 0 2px 4px -2px rgba(var(--mp-navy-rgb), 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(var(--mp-navy-rgb), 0.12), 0 4px 6px -4px rgba(var(--mp-navy-rgb), 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(var(--mp-navy-rgb), 0.14), 0 8px 10px -6px rgba(var(--mp-navy-rgb), 0.10);

  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --ff-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --ff-heading: var(--ff-body);
  --ff-mono: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  --fs-xs: clamp(0.7rem, 0.6rem + 0.25vw, 0.8rem);
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
  --fs-md: clamp(1.125rem, 1rem + 0.5vw, 1.35rem);
  --fs-lg: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --fs-3xl: clamp(2.5rem, 2rem + 4vw, 5rem);

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 500ms ease;
}

/* ---------- THEME: Light (Neutral Professional) ---------- */
[data-theme="light"] {
  --hue: 216;
  --sat: 48%;
  --clr-primary: var(--mp-navy-light);
  --clr-primary-hover: var(--mp-navy);
  --clr-primary-light: rgba(var(--mp-navy-rgb), 0.10);
  --clr-primary-text: #FFFFFF;
  --clr-bg: #F4F6F9;
  --clr-surface: #FFFFFF;
  --clr-text: var(--mp-navy);
  --clr-text-light: #5D6B7C;
  --clr-muted: #A9B3BF;
  --clr-border: rgba(var(--mp-navy-rgb), 0.14);
  --clr-border-light: rgba(var(--mp-navy-rgb), 0.07);
  --clr-info: var(--mp-teal);
}

/* ---------- THEME: Gold (Default / Warm Light) ---------- */
[data-theme="gold"] {
  --hue: 42;
  --sat: 52%;
  --clr-primary: var(--mp-gold);
  --clr-primary-hover: var(--mp-gold-dark);
  --clr-primary-light: rgba(var(--mp-gold-rgb), 0.18);
  --clr-primary-text: var(--mp-navy);
  --clr-bg: #F7F4ED;
  --clr-surface: #FFFEFB;
  --clr-text: var(--mp-navy);
  --clr-text-light: #59687A;
  --clr-muted: #B7AD99;
  --clr-border: rgba(var(--mp-navy-rgb), 0.16);
  --clr-border-light: rgba(var(--mp-navy-rgb), 0.08);
  --clr-info: var(--mp-teal);
}

/* ---------- THEME: Navy (Executive Dark) ---------- */
[data-theme="navy"] {
  --hue: 183;
  --sat: 82%;
  --clr-primary: var(--mp-teal-light);
  --clr-primary-hover: var(--mp-teal);
  --clr-primary-light: rgba(var(--mp-teal-rgb), 0.18);
  --clr-primary-text: var(--mp-navy-dark);
  --clr-bg: var(--mp-navy);
  --clr-surface: var(--mp-navy-light);
  --clr-text: #F2F6FA;
  --clr-text-light: #B8C5D3;
  --clr-muted: #718399;
  --clr-border: rgba(255, 255, 255, 0.17);
  --clr-border-light: rgba(255, 255, 255, 0.09);
  --clr-info: var(--mp-teal-light);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.38);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.46), 0 2px 4px -2px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.48), 0 4px 6px -4px rgba(0, 0, 0, 0.34);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.56), 0 8px 10px -6px rgba(0, 0, 0, 0.38);
}

/* ==========================================================================
   3. UTILITY CLASSES (mobile‑first, responsive suffixes)
   Suffix breakpoints: -sm (≥640px), -md (≥768px), -lg (≥1024px), -xl (≥1280px)
   ========================================================================== */

/* ---------- 3.1 Container & Breakpoint Containers ---------- */
.mp-container {
  width: 100%;
  max-width: var(--bp-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (min-width: 640px) {
  .mp-container { padding-left: var(--space-6); padding-right: var(--space-6); }
}
.mp-container-fluid { width: 100%; max-width: none; }

/* ---------- 3.2 Display ---------- */
.mp-d-none         { display: none; }
.mp-d-block        { display: block; }
.mp-d-inline       { display: inline; }
.mp-d-inline-block { display: inline-block; }
.mp-d-flex         { display: flex; }
.mp-d-inline-flex  { display: inline-flex; }
.mp-d-grid         { display: grid; }

@media (min-width: 640px)  { .mp-d-none-sm { display: none; } .mp-d-block-sm { display: block; } .mp-d-inline-sm { display: inline; } .mp-d-inline-block-sm { display: inline-block; } .mp-d-flex-sm { display: flex; } .mp-d-inline-flex-sm { display: inline-flex; } .mp-d-grid-sm { display: grid; } }
@media (min-width: 768px)  { .mp-d-none-md { display: none; } .mp-d-block-md { display: block; } .mp-d-inline-md { display: inline; } .mp-d-inline-block-md { display: inline-block; } .mp-d-flex-md { display: flex; } .mp-d-inline-flex-md { display: inline-flex; } .mp-d-grid-md { display: grid; } }
@media (min-width: 1024px) { .mp-d-none-lg { display: none; } .mp-d-block-lg { display: block; } .mp-d-inline-lg { display: inline; } .mp-d-inline-block-lg { display: inline-block; } .mp-d-flex-lg { display: flex; } .mp-d-inline-flex-lg { display: inline-flex; } .mp-d-grid-lg { display: grid; } }
@media (min-width: 1280px) { .mp-d-none-xl { display: none; } .mp-d-block-xl { display: block; } .mp-d-inline-xl { display: inline; } .mp-d-inline-block-xl { display: inline-block; } .mp-d-flex-xl { display: flex; } .mp-d-inline-flex-xl { display: inline-flex; } .mp-d-grid-xl { display: grid; } }

/* ---------- 3.3 Flex Helpers ---------- */
.mp-flex-row         { flex-direction: row; }
.mp-flex-col         { flex-direction: column; }
.mp-flex-wrap        { flex-wrap: wrap; }
.mp-flex-nowrap      { flex-wrap: nowrap; }
.mp-items-start      { align-items: flex-start; }
.mp-items-center     { align-items: center; }
.mp-items-end        { align-items: flex-end; }
.mp-items-stretch    { align-items: stretch; }
.mp-justify-start    { justify-content: flex-start; }
.mp-justify-center   { justify-content: center; }
.mp-justify-end      { justify-content: flex-end; }
.mp-justify-between  { justify-content: space-between; }
.mp-justify-around   { justify-content: space-around; }
.mp-justify-evenly   { justify-content: space-evenly; }

@media (min-width: 640px)  { .mp-flex-row-sm { flex-direction: row; } .mp-flex-col-sm { flex-direction: column; } .mp-flex-wrap-sm { flex-wrap: wrap; } .mp-flex-nowrap-sm { flex-wrap: nowrap; } .mp-items-start-sm { align-items: flex-start; } .mp-items-center-sm { align-items: center; } .mp-items-end-sm { align-items: flex-end; } .mp-items-stretch-sm { align-items: stretch; } .mp-justify-start-sm { justify-content: flex-start; } .mp-justify-center-sm { justify-content: center; } .mp-justify-end-sm { justify-content: flex-end; } .mp-justify-between-sm { justify-content: space-between; } .mp-justify-around-sm { justify-content: space-around; } .mp-justify-evenly-sm { justify-content: space-evenly; } }
@media (min-width: 768px)  { .mp-flex-row-md { flex-direction: row; } .mp-flex-col-md { flex-direction: column; } .mp-flex-wrap-md { flex-wrap: wrap; } .mp-flex-nowrap-md { flex-wrap: nowrap; } .mp-items-start-md { align-items: flex-start; } .mp-items-center-md { align-items: center; } .mp-items-end-md { align-items: flex-end; } .mp-items-stretch-md { align-items: stretch; } .mp-justify-start-md { justify-content: flex-start; } .mp-justify-center-md { justify-content: center; } .mp-justify-end-md { justify-content: flex-end; } .mp-justify-between-md { justify-content: space-between; } .mp-justify-around-md { justify-content: space-around; } .mp-justify-evenly-md { justify-content: space-evenly; } }
@media (min-width: 1024px) { .mp-flex-row-lg { flex-direction: row; } .mp-flex-col-lg { flex-direction: column; } .mp-flex-wrap-lg { flex-wrap: wrap; } .mp-flex-nowrap-lg { flex-wrap: nowrap; } .mp-items-start-lg { align-items: flex-start; } .mp-items-center-lg { align-items: center; } .mp-items-end-lg { align-items: flex-end; } .mp-items-stretch-lg { align-items: stretch; } .mp-justify-start-lg { justify-content: flex-start; } .mp-justify-center-lg { justify-content: center; } .mp-justify-end-lg { justify-content: flex-end; } .mp-justify-between-lg { justify-content: space-between; } .mp-justify-around-lg { justify-content: space-around; } .mp-justify-evenly-lg { justify-content: space-evenly; } }
@media (min-width: 1280px) { .mp-flex-row-xl { flex-direction: row; } .mp-flex-col-xl { flex-direction: column; } .mp-flex-wrap-xl { flex-wrap: wrap; } .mp-flex-nowrap-xl { flex-wrap: nowrap; } .mp-items-start-xl { align-items: flex-start; } .mp-items-center-xl { align-items: center; } .mp-items-end-xl { align-items: flex-end; } .mp-items-stretch-xl { align-items: stretch; } .mp-justify-start-xl { justify-content: flex-start; } .mp-justify-center-xl { justify-content: center; } .mp-justify-end-xl { justify-content: flex-end; } .mp-justify-between-xl { justify-content: space-between; } .mp-justify-around-xl { justify-content: space-around; } .mp-justify-evenly-xl { justify-content: space-evenly; } }

/* ---------- 3.4 Gap ---------- */
.mp-gap-0  { gap: var(--space-0); }  .mp-gap-1  { gap: var(--space-1); }  .mp-gap-2  { gap: var(--space-2); }  .mp-gap-3  { gap: var(--space-3); }  .mp-gap-4  { gap: var(--space-4); }  .mp-gap-5  { gap: var(--space-5); }  .mp-gap-6  { gap: var(--space-6); }  .mp-gap-8  { gap: var(--space-8); }  .mp-gap-10 { gap: var(--space-10); } .mp-gap-12 { gap: var(--space-12); }
@media (min-width: 640px)  { .mp-gap-0-sm  { gap: var(--space-0); } .mp-gap-1-sm  { gap: var(--space-1); } .mp-gap-2-sm  { gap: var(--space-2); } .mp-gap-3-sm  { gap: var(--space-3); } .mp-gap-4-sm  { gap: var(--space-4); } .mp-gap-5-sm  { gap: var(--space-5); } .mp-gap-6-sm  { gap: var(--space-6); } .mp-gap-8-sm  { gap: var(--space-8); } .mp-gap-10-sm { gap: var(--space-10); } .mp-gap-12-sm { gap: var(--space-12); } }
@media (min-width: 768px)  { .mp-gap-0-md  { gap: var(--space-0); } .mp-gap-1-md  { gap: var(--space-1); } .mp-gap-2-md  { gap: var(--space-2); } .mp-gap-3-md  { gap: var(--space-3); } .mp-gap-4-md  { gap: var(--space-4); } .mp-gap-5-md  { gap: var(--space-5); } .mp-gap-6-md  { gap: var(--space-6); } .mp-gap-8-md  { gap: var(--space-8); } .mp-gap-10-md { gap: var(--space-10); } .mp-gap-12-md { gap: var(--space-12); } }
@media (min-width: 1024px) { .mp-gap-0-lg  { gap: var(--space-0); } .mp-gap-1-lg  { gap: var(--space-1); } .mp-gap-2-lg  { gap: var(--space-2); } .mp-gap-3-lg  { gap: var(--space-3); } .mp-gap-4-lg  { gap: var(--space-4); } .mp-gap-5-lg  { gap: var(--space-5); } .mp-gap-6-lg  { gap: var(--space-6); } .mp-gap-8-lg  { gap: var(--space-8); } .mp-gap-10-lg { gap: var(--space-10); } .mp-gap-12-lg { gap: var(--space-12); } }
@media (min-width: 1280px) { .mp-gap-0-xl  { gap: var(--space-0); } .mp-gap-1-xl  { gap: var(--space-1); } .mp-gap-2-xl  { gap: var(--space-2); } .mp-gap-3-xl  { gap: var(--space-3); } .mp-gap-4-xl  { gap: var(--space-4); } .mp-gap-5-xl  { gap: var(--space-5); } .mp-gap-6-xl  { gap: var(--space-6); } .mp-gap-8-xl  { gap: var(--space-8); } .mp-gap-10-xl { gap: var(--space-10); } .mp-gap-12-xl { gap: var(--space-12); } }

/* ---------- 3.5 Grid (12 columns) + advanced grid utilities ---------- */
.mp-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}
.mp-col-1  { grid-column: span 1; } .mp-col-2  { grid-column: span 2; } .mp-col-3  { grid-column: span 3; } .mp-col-4  { grid-column: span 4; } .mp-col-5  { grid-column: span 5; } .mp-col-6  { grid-column: span 6; } .mp-col-7  { grid-column: span 7; } .mp-col-8  { grid-column: span 8; } .mp-col-9  { grid-column: span 9; } .mp-col-10 { grid-column: span 10; } .mp-col-11 { grid-column: span 11; } .mp-col-12 { grid-column: span 12; }
@media (min-width: 640px)  { .mp-col-sm-1 { grid-column: span 1; } .mp-col-sm-2 { grid-column: span 2; } .mp-col-sm-3 { grid-column: span 3; } .mp-col-sm-4 { grid-column: span 4; } .mp-col-sm-5 { grid-column: span 5; } .mp-col-sm-6 { grid-column: span 6; } .mp-col-sm-7 { grid-column: span 7; } .mp-col-sm-8 { grid-column: span 8; } .mp-col-sm-9 { grid-column: span 9; } .mp-col-sm-10 { grid-column: span 10; } .mp-col-sm-11 { grid-column: span 11; } .mp-col-sm-12 { grid-column: span 12; } }
@media (min-width: 768px)  { .mp-col-md-1 { grid-column: span 1; } .mp-col-md-2 { grid-column: span 2; } .mp-col-md-3 { grid-column: span 3; } .mp-col-md-4 { grid-column: span 4; } .mp-col-md-5 { grid-column: span 5; } .mp-col-md-6 { grid-column: span 6; } .mp-col-md-7 { grid-column: span 7; } .mp-col-md-8 { grid-column: span 8; } .mp-col-md-9 { grid-column: span 9; } .mp-col-md-10 { grid-column: span 10; } .mp-col-md-11 { grid-column: span 11; } .mp-col-md-12 { grid-column: span 12; } }
@media (min-width: 1024px) { .mp-col-lg-1 { grid-column: span 1; } .mp-col-lg-2 { grid-column: span 2; } .mp-col-lg-3 { grid-column: span 3; } .mp-col-lg-4 { grid-column: span 4; } .mp-col-lg-5 { grid-column: span 5; } .mp-col-lg-6 { grid-column: span 6; } .mp-col-lg-7 { grid-column: span 7; } .mp-col-lg-8 { grid-column: span 8; } .mp-col-lg-9 { grid-column: span 9; } .mp-col-lg-10 { grid-column: span 10; } .mp-col-lg-11 { grid-column: span 11; } .mp-col-lg-12 { grid-column: span 12; } }
@media (min-width: 1280px) { .mp-col-xl-1 { grid-column: span 1; } .mp-col-xl-2 { grid-column: span 2; } .mp-col-xl-3 { grid-column: span 3; } .mp-col-xl-4 { grid-column: span 4; } .mp-col-xl-5 { grid-column: span 5; } .mp-col-xl-6 { grid-column: span 6; } .mp-col-xl-7 { grid-column: span 7; } .mp-col-xl-8 { grid-column: span 8; } .mp-col-xl-9 { grid-column: span 9; } .mp-col-xl-10 { grid-column: span 10; } .mp-col-xl-11 { grid-column: span 11; } .mp-col-xl-12 { grid-column: span 12; } }

/* Advanced grid utilities */
.mp-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
.mp-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
.mp-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
.mp-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
.mp-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
.mp-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
.mp-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

.mp-grid-rows-auto { grid-auto-rows: auto; }
.mp-grid-rows-1    { grid-template-rows: repeat(1, 1fr); }
.mp-grid-rows-2    { grid-template-rows: repeat(2, 1fr); }
.mp-grid-rows-3    { grid-template-rows: repeat(3, 1fr); }

.mp-grid-flow-row    { grid-auto-flow: row; }
.mp-grid-flow-col    { grid-auto-flow: column; }
.mp-grid-flow-dense  { grid-auto-flow: dense; }

.mp-col-auto { grid-column: auto; }
.mp-row-auto { grid-row: auto; }
.mp-col-span-2 { grid-column: span 2; }
.mp-col-span-3 { grid-column: span 3; }
.mp-col-span-4 { grid-column: span 4; }
.mp-col-span-6 { grid-column: span 6; }
.mp-col-span-full { grid-column: 1 / -1; }

/* ---------- 3.6 Spacing (Margin & Padding) ---------- */
.mp-m-0  { margin: var(--space-0); } .mp-p-0  { padding: var(--space-0); }
.mp-m-1  { margin: var(--space-1); } .mp-p-1  { padding: var(--space-1); }
.mp-m-2  { margin: var(--space-2); } .mp-p-2  { padding: var(--space-2); }
.mp-m-3  { margin: var(--space-3); } .mp-p-3  { padding: var(--space-3); }
.mp-m-4  { margin: var(--space-4); } .mp-p-4  { padding: var(--space-4); }
.mp-m-5  { margin: var(--space-5); } .mp-p-5  { padding: var(--space-5); }
.mp-m-6  { margin: var(--space-6); } .mp-p-6  { padding: var(--space-6); }
.mp-m-8  { margin: var(--space-8); } .mp-p-8  { padding: var(--space-8); }
.mp-m-10 { margin: var(--space-10); } .mp-p-10 { padding: var(--space-10); }
.mp-m-12 { margin: var(--space-12); } .mp-p-12 { padding: var(--space-12); }
.mp-m-16 { margin: var(--space-16); } .mp-p-16 { padding: var(--space-16); }

/* Directional margins/paddings */
.mp-mt-0  { margin-top: var(--space-0); } .mp-mb-0  { margin-bottom: var(--space-0); }
.mp-mt-1  { margin-top: var(--space-1); } .mp-mb-1  { margin-bottom: var(--space-1); }
.mp-mt-2  { margin-top: var(--space-2); } .mp-mb-2  { margin-bottom: var(--space-2); }
.mp-mt-3  { margin-top: var(--space-3); } .mp-mb-3  { margin-bottom: var(--space-3); }
.mp-mt-4  { margin-top: var(--space-4); } .mp-mb-4  { margin-bottom: var(--space-4); }
.mp-mt-5  { margin-top: var(--space-5); } .mp-mb-5  { margin-bottom: var(--space-5); }
.mp-mt-6  { margin-top: var(--space-6); } .mp-mb-6  { margin-bottom: var(--space-6); }
.mp-mt-8  { margin-top: var(--space-8); } .mp-mb-8  { margin-bottom: var(--space-8); }
.mp-mt-10 { margin-top: var(--space-10); } .mp-mb-10 { margin-bottom: var(--space-10); }
.mp-mt-12 { margin-top: var(--space-12); } .mp-mb-12 { margin-bottom: var(--space-12); }
.mp-mt-16 { margin-top: var(--space-16); } .mp-mb-16 { margin-bottom: var(--space-16); }

.mp-ml-0  { margin-left: var(--space-0); } .mp-mr-0  { margin-right: var(--space-0); }
.mp-ml-1  { margin-left: var(--space-1); } .mp-mr-1  { margin-right: var(--space-1); }
.mp-ml-2  { margin-left: var(--space-2); } .mp-mr-2  { margin-right: var(--space-2); }
.mp-ml-3  { margin-left: var(--space-3); } .mp-mr-3  { margin-right: var(--space-3); }
.mp-ml-4  { margin-left: var(--space-4); } .mp-mr-4  { margin-right: var(--space-4); }
.mp-ml-5  { margin-left: var(--space-5); } .mp-mr-5  { margin-right: var(--space-5); }
.mp-ml-6  { margin-left: var(--space-6); } .mp-mr-6  { margin-right: var(--space-6); }
.mp-ml-8  { margin-left: var(--space-8); } .mp-mr-8  { margin-right: var(--space-8); }
.mp-ml-10 { margin-left: var(--space-10); } .mp-mr-10 { margin-right: var(--space-10); }
.mp-ml-12 { margin-left: var(--space-12); } .mp-mr-12 { margin-right: var(--space-12); }
.mp-ml-16 { margin-left: var(--space-16); } .mp-mr-16 { margin-right: var(--space-16); }

.mp-px-0  { padding-left: var(--space-0);  padding-right: var(--space-0); }
.mp-px-1  { padding-left: var(--space-1);  padding-right: var(--space-1); }
.mp-px-2  { padding-left: var(--space-2);  padding-right: var(--space-2); }
.mp-px-3  { padding-left: var(--space-3);  padding-right: var(--space-3); }
.mp-px-4  { padding-left: var(--space-4);  padding-right: var(--space-4); }
.mp-px-5  { padding-left: var(--space-5);  padding-right: var(--space-5); }
.mp-px-6  { padding-left: var(--space-6);  padding-right: var(--space-6); }
.mp-px-8  { padding-left: var(--space-8);  padding-right: var(--space-8); }
.mp-px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.mp-px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.mp-px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }

.mp-py-0  { padding-top: var(--space-0);  padding-bottom: var(--space-0); }
.mp-py-1  { padding-top: var(--space-1);  padding-bottom: var(--space-1); }
.mp-py-2  { padding-top: var(--space-2);  padding-bottom: var(--space-2); }
.mp-py-3  { padding-top: var(--space-3);  padding-bottom: var(--space-3); }
.mp-py-4  { padding-top: var(--space-4);  padding-bottom: var(--space-4); }
.mp-py-5  { padding-top: var(--space-5);  padding-bottom: var(--space-5); }
.mp-py-6  { padding-top: var(--space-6);  padding-bottom: var(--space-6); }
.mp-py-8  { padding-top: var(--space-8);  padding-bottom: var(--space-8); }
.mp-py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.mp-py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.mp-py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }

.mp-mx-auto { margin-left: auto; margin-right: auto; }
.mp-ml-auto { margin-left: auto; }
.mp-mr-auto { margin-right: auto; }

/* Responsive spacing (common breakpoints) */
@media (min-width: 640px)  { .mp-m-0-sm  { margin: var(--space-0); } .mp-p-0-sm  { padding: var(--space-0); } .mp-mt-0-sm { margin-top: var(--space-0); } .mp-mb-0-sm { margin-bottom: var(--space-0); } .mp-mt-4-sm { margin-top: var(--space-4); } .mp-mb-4-sm { margin-bottom: var(--space-4); } .mp-px-4-sm { padding-left: var(--space-4); padding-right: var(--space-4); } .mp-py-4-sm { padding-top: var(--space-4); padding-bottom: var(--space-4); } }
@media (min-width: 768px)  { .mp-m-0-md  { margin: var(--space-0); } .mp-p-0-md  { padding: var(--space-0); } .mp-mt-0-md { margin-top: var(--space-0); } .mp-mb-0-md { margin-bottom: var(--space-0); } .mp-mt-4-md { margin-top: var(--space-4); } .mp-mb-4-md { margin-bottom: var(--space-4); } .mp-px-4-md { padding-left: var(--space-4); padding-right: var(--space-4); } .mp-py-4-md { padding-top: var(--space-4); padding-bottom: var(--space-4); } }
@media (min-width: 1024px) { .mp-m-0-lg  { margin: var(--space-0); } .mp-p-0-lg  { padding: var(--space-0); } .mp-mt-0-lg { margin-top: var(--space-0); } .mp-mb-0-lg { margin-bottom: var(--space-0); } .mp-mt-4-lg { margin-top: var(--space-4); } .mp-mb-4-lg { margin-bottom: var(--space-4); } .mp-px-4-lg { padding-left: var(--space-4); padding-right: var(--space-4); } .mp-py-4-lg { padding-top: var(--space-4); padding-bottom: var(--space-4); } }
@media (min-width: 1280px) { .mp-m-0-xl  { margin: var(--space-0); } .mp-p-0-xl  { padding: var(--space-0); } .mp-mt-0-xl { margin-top: var(--space-0); } .mp-mb-0-xl { margin-bottom: var(--space-0); } .mp-mt-4-xl { margin-top: var(--space-4); } .mp-mb-4-xl { margin-bottom: var(--space-4); } .mp-px-4-xl { padding-left: var(--space-4); padding-right: var(--space-4); } .mp-py-4-xl { padding-top: var(--space-4); padding-bottom: var(--space-4); } }

/* ---------- 3.7 Width & Height ---------- */
.mp-w-full      { width: 100%; } .mp-w-1\/2 { width: 50%; } .mp-w-1\/3 { width: 33.333333%; } .mp-w-2\/3 { width: 66.666667%; } .mp-w-1\/4 { width: 25%; } .mp-w-3\/4 { width: 75%; } .mp-w-auto { width: auto; }
.mp-h-full      { height: 100%; } .mp-h-screen { height: 100vh; } .mp-h-auto { height: auto; }
@media (min-width: 640px)  { .mp-w-full-sm { width: 100%; } .mp-w-1\/2-sm { width: 50%; } .mp-w-1\/3-sm { width: 33.333333%; } .mp-w-2\/3-sm { width: 66.666667%; } .mp-w-1\/4-sm { width: 25%; } .mp-w-3\/4-sm { width: 75%; } .mp-w-auto-sm { width: auto; } }
@media (min-width: 768px)  { .mp-w-full-md { width: 100%; } .mp-w-1\/2-md { width: 50%; } .mp-w-1\/3-md { width: 33.333333%; } .mp-w-2\/3-md { width: 66.666667%; } .mp-w-1\/4-md { width: 25%; } .mp-w-3\/4-md { width: 75%; } .mp-w-auto-md { width: auto; } }
@media (min-width: 1024px) { .mp-w-full-lg { width: 100%; } .mp-w-1\/2-lg { width: 50%; } .mp-w-1\/3-lg { width: 33.333333%; } .mp-w-2\/3-lg { width: 66.666667%; } .mp-w-1\/4-lg { width: 25%; } .mp-w-3\/4-lg { width: 75%; } .mp-w-auto-lg { width: auto; } }
@media (min-width: 1280px) { .mp-w-full-xl { width: 100%; } .mp-w-1\/2-xl { width: 50%; } .mp-w-1\/3-xl { width: 33.333333%; } .mp-w-2\/3-xl { width: 66.666667%; } .mp-w-1\/4-xl { width: 25%; } .mp-w-3\/4-xl { width: 75%; } .mp-w-auto-xl { width: auto; } }

/* ---------- 3.8 Typography ---------- */
.mp-text-xs    { font-size: var(--fs-xs); } .mp-text-sm    { font-size: var(--fs-sm); } .mp-text-base  { font-size: var(--fs-base); } .mp-text-md    { font-size: var(--fs-md); } .mp-text-lg    { font-size: var(--fs-lg); } .mp-text-xl    { font-size: var(--fs-xl); } .mp-text-2xl   { font-size: var(--fs-2xl); } .mp-text-3xl   { font-size: var(--fs-3xl); }
.mp-font-light    { font-weight: var(--fw-light); } .mp-font-normal   { font-weight: var(--fw-normal); } .mp-font-medium   { font-weight: var(--fw-medium); } .mp-font-semibold { font-weight: var(--fw-semibold); } .mp-font-bold     { font-weight: var(--fw-bold); }
.mp-leading-tight   { line-height: var(--lh-tight); } .mp-leading-normal  { line-height: var(--lh-normal); } .mp-leading-relaxed { line-height: var(--lh-relaxed); }
.mp-text-left    { text-align: left; } .mp-text-center  { text-align: center; } .mp-text-right   { text-align: right; } .mp-text-justify { text-align: justify; }
@media (min-width: 640px)  { .mp-text-left-sm   { text-align: left; } .mp-text-center-sm { text-align: center; } .mp-text-right-sm  { text-align: right; } }
@media (min-width: 768px)  { .mp-text-left-md   { text-align: left; } .mp-text-center-md { text-align: center; } .mp-text-right-md  { text-align: right; } }
@media (min-width: 1024px) { .mp-text-left-lg   { text-align: left; } .mp-text-center-lg { text-align: center; } .mp-text-right-lg  { text-align: right; } }
@media (min-width: 1280px) { .mp-text-left-xl   { text-align: left; } .mp-text-center-xl { text-align: center; } .mp-text-right-xl  { text-align: right; } }
.mp-uppercase    { text-transform: uppercase; } .mp-capitalize   { text-transform: capitalize; }
.mp-underline    { text-decoration: underline; } .mp-no-underline { text-decoration: none; } .mp-line-through { text-decoration: line-through; }
.mp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-whitespace-normal   { white-space: normal; } .mp-whitespace-nowrap   { white-space: nowrap; } .mp-whitespace-pre      { white-space: pre; } .mp-whitespace-pre-wrap { white-space: pre-wrap; }
.mp-list-none { list-style: none; }

/* ---------- 3.9 Background & Text Colors (theme tokens + palette) ---------- */
.mp-bg-primary    { background-color: var(--clr-primary); } .mp-bg-surface    { background-color: var(--clr-surface); } .mp-bg-muted      { background-color: var(--clr-muted); }
.mp-bg-success    { background-color: var(--clr-success); } .mp-bg-danger     { background-color: var(--clr-danger); } .mp-bg-warning    { background-color: var(--clr-warning); } .mp-bg-info       { background-color: var(--clr-info); }
.mp-text-primary  { color: var(--clr-primary); } .mp-text-light    { color: var(--clr-text-light); } .mp-text-white    { color: #fff; }
.mp-text-success  { color: var(--clr-success); } .mp-text-danger   { color: var(--clr-danger); } .mp-text-warning  { color: var(--clr-warning); } .mp-text-info     { color: var(--clr-info); }

/* ---------- 3.10 Borders & Radius ---------- */
.mp-border        { border: 1px solid var(--clr-border); } .mp-border-t      { border-top: 1px solid var(--clr-border); } .mp-border-b      { border-bottom: 1px solid var(--clr-border); } .mp-border-l      { border-left: 1px solid var(--clr-border); } .mp-border-r      { border-right: 1px solid var(--clr-border); } .mp-border-none   { border: none; }
.mp-rounded-none  { border-radius: var(--radius-none); } .mp-rounded-sm    { border-radius: var(--radius-sm); } .mp-rounded-md    { border-radius: var(--radius-md); } .mp-rounded-lg    { border-radius: var(--radius-lg); } .mp-rounded-xl    { border-radius: var(--radius-xl); } .mp-rounded-full  { border-radius: var(--radius-full); }

/* ---------- 3.11 Shadows ---------- */
.mp-shadow-none { box-shadow: none; } .mp-shadow-xs   { box-shadow: var(--shadow-xs); } .mp-shadow-sm   { box-shadow: var(--shadow-sm); } .mp-shadow-md   { box-shadow: var(--shadow-md); } .mp-shadow-lg   { box-shadow: var(--shadow-lg); } .mp-shadow-xl   { box-shadow: var(--shadow-xl); }

/* ---------- 3.12 Object Fit ---------- */
.mp-object-cover     { object-fit: cover; } .mp-object-contain   { object-fit: contain; } .mp-object-fill      { object-fit: fill; } .mp-object-none      { object-fit: none; } .mp-object-scale-down { object-fit: scale-down; }

/* ---------- 3.13 Overflow ---------- */
.mp-overflow-auto    { overflow: auto; } .mp-overflow-hidden  { overflow: hidden; } .mp-overflow-visible { overflow: visible; } .mp-overflow-scroll  { overflow: scroll; } .mp-overflow-x-auto  { overflow-x: auto; } .mp-overflow-y-auto  { overflow-y: auto; }

/* ---------- 3.14 Position & Inset ---------- */
.mp-relative  { position: relative; } .mp-absolute  { position: absolute; } .mp-fixed     { position: fixed; } .mp-sticky    { position: sticky; }
.mp-inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.mp-top-0     { top: 0; } .mp-right-0   { right: 0; } .mp-bottom-0  { bottom: 0; } .mp-left-0    { left: 0; }
.mp-top-auto  { top: auto; } .mp-right-auto { right: auto; } .mp-bottom-auto { bottom: auto; } .mp-left-auto  { left: auto; }

/* ---------- 3.15 Z-Index ---------- */
.mp-z-0    { z-index: 0; } .mp-z-10   { z-index: 10; } .mp-z-20   { z-index: 20; } .mp-z-30   { z-index: 30; } .mp-z-40   { z-index: 40; } .mp-z-50   { z-index: 50; } .mp-z-auto { z-index: auto; }

/* ---------- 3.16 Cursor ---------- */
.mp-cursor-pointer     { cursor: pointer; } .mp-cursor-default     { cursor: default; } .mp-cursor-not-allowed { cursor: not-allowed; } .mp-cursor-help        { cursor: help; }

/* ---------- 3.17 Opacity ---------- */
.mp-opacity-0   { opacity: 0; } .mp-opacity-25  { opacity: 0.25; } .mp-opacity-50  { opacity: 0.5; } .mp-opacity-75  { opacity: 0.75; } .mp-opacity-100 { opacity: 1; }

/* ---------- 3.18 Vertical Align ---------- */
.mp-align-baseline { vertical-align: baseline; } .mp-align-top      { vertical-align: top; } .mp-align-middle   { vertical-align: middle; } .mp-align-bottom   { vertical-align: bottom; }

/* ---------- 3.19 Aspect Ratio ---------- */
.mp-aspect-auto   { aspect-ratio: auto; } .mp-aspect-square { aspect-ratio: 1 / 1; } .mp-aspect-video  { aspect-ratio: 16 / 9; } .mp-aspect-4\/3    { aspect-ratio: 4 / 3; } .mp-aspect-3\/2    { aspect-ratio: 3 / 2; }

/* ---------- 3.20 Multi-column Text ---------- */
.mp-columns-2 { column-count: 2; column-gap: var(--space-4); }
.mp-columns-3 { column-count: 3; column-gap: var(--space-4); }
.mp-columns-4 { column-count: 4; column-gap: var(--space-4); }

/* ---------- 3.21 Backdrop Blur Utilities ---------- */
.mp-backdrop-blur-xs  { backdrop-filter: blur(2px); }
.mp-backdrop-blur-sm  { backdrop-filter: blur(4px); }
.mp-backdrop-blur-md  { backdrop-filter: blur(8px); }
.mp-backdrop-blur-lg  { backdrop-filter: blur(16px); }
.mp-backdrop-blur-xl  { backdrop-filter: blur(24px); }

/* ---------- 3.22 Gradient Background Utilities ---------- */
.mp-bg-gradient-primary { background-image: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-hover)); }
.mp-bg-gradient-success { background-image: linear-gradient(135deg, var(--clr-success), #2F9B7D); }
.mp-bg-gradient-danger  { background-image: linear-gradient(135deg, var(--clr-danger), #A94442); }
.mp-bg-gradient-warning { background-image: linear-gradient(135deg, var(--clr-warning), #C2821A); }
.mp-bg-gradient-info    { background-image: linear-gradient(135deg, var(--clr-info), #2D7FA0); }
.mp-bg-gradient-dark    { background-image: linear-gradient(135deg, #1e1e2f, #2c2c3e); }
.mp-bg-gradient-light   { background-image: linear-gradient(135deg, #f8f9fa, #e9ecef); }

/* ---------- 3.23 Transition & Animation Utility Classes ---------- */
.mp-transition-all      { transition: all var(--transition-normal); }
.mp-transition-none     { transition: none; }
.mp-transition-colors   { transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal); }
.mp-transition-opacity  { transition: opacity var(--transition-normal); }
.mp-transition-transform { transition: transform var(--transition-normal); }

.mp-animate-fadeIn      { animation: mp-fadeIn var(--transition-slow) ease forwards; }
.mp-animate-fadeOut     { animation: mp-fadeOut var(--transition-slow) ease forwards; }
.mp-animate-slideInUp   { animation: mp-slideInUp var(--transition-slow) ease forwards; }
.mp-animate-slideInDown { animation: mp-slideInDown var(--transition-slow) ease forwards; }
.mp-animate-slideInLeft { animation: mp-slideInLeft var(--transition-slow) ease forwards; }
.mp-animate-slideInRight{ animation: mp-slideInRight var(--transition-slow) ease forwards; }
.mp-animate-zoomIn      { animation: mp-zoomIn var(--transition-slow) ease forwards; }
.mp-animate-spin        { animation: mp-spin 1s linear infinite; }
.mp-animate-pulse       { animation: mp-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ---------- 3.24 Full Color Palette Utilities (Shades 50..900) ---------- */
/* Primary */
.mp-bg-primary-50    { background-color: hsl(var(--hue), 65%, 95%); } .mp-text-primary-50    { color: hsl(var(--hue), 65%, 95%); } .mp-border-primary-50    { border-color: hsl(var(--hue), 65%, 95%); }
.mp-bg-primary-100   { background-color: hsl(var(--hue), 65%, 88%); } .mp-text-primary-100   { color: hsl(var(--hue), 65%, 88%); } .mp-border-primary-100   { border-color: hsl(var(--hue), 65%, 88%); }
.mp-bg-primary-200   { background-color: hsl(var(--hue), 65%, 78%); } .mp-text-primary-200   { color: hsl(var(--hue), 65%, 78%); } .mp-border-primary-200   { border-color: hsl(var(--hue), 65%, 78%); }
.mp-bg-primary-300   { background-color: hsl(var(--hue), 65%, 68%); } .mp-text-primary-300   { color: hsl(var(--hue), 65%, 68%); } .mp-border-primary-300   { border-color: hsl(var(--hue), 65%, 68%); }
.mp-bg-primary-400   { background-color: hsl(var(--hue), 65%, 58%); } .mp-text-primary-400   { color: hsl(var(--hue), 65%, 58%); } .mp-border-primary-400   { border-color: hsl(var(--hue), 65%, 58%); }
.mp-bg-primary-500   { background-color: var(--clr-primary); } .mp-text-primary-500   { color: var(--clr-primary); } .mp-border-primary-500   { border-color: var(--clr-primary); }
.mp-bg-primary-600   { background-color: hsl(var(--hue), 65%, 42%); } .mp-text-primary-600   { color: hsl(var(--hue), 65%, 42%); } .mp-border-primary-600   { border-color: hsl(var(--hue), 65%, 42%); }
.mp-bg-primary-700   { background-color: hsl(var(--hue), 65%, 32%); } .mp-text-primary-700   { color: hsl(var(--hue), 65%, 32%); } .mp-border-primary-700   { border-color: hsl(var(--hue), 65%, 32%); }
.mp-bg-primary-800   { background-color: hsl(var(--hue), 65%, 22%); } .mp-text-primary-800   { color: hsl(var(--hue), 65%, 22%); } .mp-border-primary-800   { border-color: hsl(var(--hue), 65%, 22%); }
.mp-bg-primary-900   { background-color: hsl(var(--hue), 65%, 12%); } .mp-text-primary-900   { color: hsl(var(--hue), 65%, 12%); } .mp-border-primary-900   { border-color: hsl(var(--hue), 65%, 12%); }

/* Success */
.mp-bg-success-50    { background-color: hsl(140, 50%, 95%); } .mp-text-success-50    { color: hsl(140, 50%, 95%); } .mp-border-success-50    { border-color: hsl(140, 50%, 95%); }
.mp-bg-success-100   { background-color: hsl(140, 50%, 85%); } .mp-text-success-100   { color: hsl(140, 50%, 85%); } .mp-border-success-100   { border-color: hsl(140, 50%, 85%); }
.mp-bg-success-200   { background-color: hsl(140, 50%, 75%); } .mp-text-success-200   { color: hsl(140, 50%, 75%); } .mp-border-success-200   { border-color: hsl(140, 50%, 75%); }
.mp-bg-success-300   { background-color: hsl(140, 50%, 65%); } .mp-text-success-300   { color: hsl(140, 50%, 65%); } .mp-border-success-300   { border-color: hsl(140, 50%, 65%); }
.mp-bg-success-400   { background-color: hsl(140, 50%, 55%); } .mp-text-success-400   { color: hsl(140, 50%, 55%); } .mp-border-success-400   { border-color: hsl(140, 50%, 55%); }
.mp-bg-success-500   { background-color: var(--clr-success); } .mp-text-success-500   { color: var(--clr-success); } .mp-border-success-500   { border-color: var(--clr-success); }
.mp-bg-success-600   { background-color: hsl(140, 50%, 40%); } .mp-text-success-600   { color: hsl(140, 50%, 40%); } .mp-border-success-600   { border-color: hsl(140, 50%, 40%); }
.mp-bg-success-700   { background-color: hsl(140, 50%, 30%); } .mp-text-success-700   { color: hsl(140, 50%, 30%); } .mp-border-success-700   { border-color: hsl(140, 50%, 30%); }
.mp-bg-success-800   { background-color: hsl(140, 50%, 20%); } .mp-text-success-800   { color: hsl(140, 50%, 20%); } .mp-border-success-800   { border-color: hsl(140, 50%, 20%); }
.mp-bg-success-900   { background-color: hsl(140, 50%, 10%); } .mp-text-success-900   { color: hsl(140, 50%, 10%); } .mp-border-success-900   { border-color: hsl(140, 50%, 10%); }

/* Danger */
.mp-bg-danger-50    { background-color: hsl(0, 70%, 95%); } .mp-text-danger-50    { color: hsl(0, 70%, 95%); } .mp-border-danger-50    { border-color: hsl(0, 70%, 95%); }
.mp-bg-danger-100   { background-color: hsl(0, 70%, 85%); } .mp-text-danger-100   { color: hsl(0, 70%, 85%); } .mp-border-danger-100   { border-color: hsl(0, 70%, 85%); }
.mp-bg-danger-200   { background-color: hsl(0, 70%, 75%); } .mp-text-danger-200   { color: hsl(0, 70%, 75%); } .mp-border-danger-200   { border-color: hsl(0, 70%, 75%); }
.mp-bg-danger-300   { background-color: hsl(0, 70%, 65%); } .mp-text-danger-300   { color: hsl(0, 70%, 65%); } .mp-border-danger-300   { border-color: hsl(0, 70%, 65%); }
.mp-bg-danger-400   { background-color: hsl(0, 70%, 55%); } .mp-text-danger-400   { color: hsl(0, 70%, 55%); } .mp-border-danger-400   { border-color: hsl(0, 70%, 55%); }
.mp-bg-danger-500   { background-color: var(--clr-danger); } .mp-text-danger-500   { color: var(--clr-danger); } .mp-border-danger-500   { border-color: var(--clr-danger); }
.mp-bg-danger-600   { background-color: hsl(0, 70%, 40%); } .mp-text-danger-600   { color: hsl(0, 70%, 40%); } .mp-border-danger-600   { border-color: hsl(0, 70%, 40%); }
.mp-bg-danger-700   { background-color: hsl(0, 70%, 30%); } .mp-text-danger-700   { color: hsl(0, 70%, 30%); } .mp-border-danger-700   { border-color: hsl(0, 70%, 30%); }
.mp-bg-danger-800   { background-color: hsl(0, 70%, 20%); } .mp-text-danger-800   { color: hsl(0, 70%, 20%); } .mp-border-danger-800   { border-color: hsl(0, 70%, 20%); }
.mp-bg-danger-900   { background-color: hsl(0, 70%, 10%); } .mp-text-danger-900   { color: hsl(0, 70%, 10%); } .mp-border-danger-900   { border-color: hsl(0, 70%, 10%); }

/* Warning */
.mp-bg-warning-50    { background-color: hsl(35, 90%, 95%); } .mp-text-warning-50    { color: hsl(35, 90%, 95%); } .mp-border-warning-50    { border-color: hsl(35, 90%, 95%); }
.mp-bg-warning-100   { background-color: hsl(35, 90%, 85%); } .mp-text-warning-100   { color: hsl(35, 90%, 85%); } .mp-border-warning-100   { border-color: hsl(35, 90%, 85%); }
.mp-bg-warning-200   { background-color: hsl(35, 90%, 75%); } .mp-text-warning-200   { color: hsl(35, 90%, 75%); } .mp-border-warning-200   { border-color: hsl(35, 90%, 75%); }
.mp-bg-warning-300   { background-color: hsl(35, 90%, 65%); } .mp-text-warning-300   { color: hsl(35, 90%, 65%); } .mp-border-warning-300   { border-color: hsl(35, 90%, 65%); }
.mp-bg-warning-400   { background-color: hsl(35, 90%, 55%); } .mp-text-warning-400   { color: hsl(35, 90%, 55%); } .mp-border-warning-400   { border-color: hsl(35, 90%, 55%); }
.mp-bg-warning-500   { background-color: var(--clr-warning); } .mp-text-warning-500   { color: var(--clr-warning); } .mp-border-warning-500   { border-color: var(--clr-warning); }
.mp-bg-warning-600   { background-color: hsl(35, 90%, 40%); } .mp-text-warning-600   { color: hsl(35, 90%, 40%); } .mp-border-warning-600   { border-color: hsl(35, 90%, 40%); }
.mp-bg-warning-700   { background-color: hsl(35, 90%, 30%); } .mp-text-warning-700   { color: hsl(35, 90%, 30%); } .mp-border-warning-700   { border-color: hsl(35, 90%, 30%); }
.mp-bg-warning-800   { background-color: hsl(35, 90%, 20%); } .mp-text-warning-800   { color: hsl(35, 90%, 20%); } .mp-border-warning-800   { border-color: hsl(35, 90%, 20%); }
.mp-bg-warning-900   { background-color: hsl(35, 90%, 10%); } .mp-text-warning-900   { color: hsl(35, 90%, 10%); } .mp-border-warning-900   { border-color: hsl(35, 90%, 10%); }

/* Info */
.mp-bg-info-50    { background-color: hsl(200, 60%, 95%); } .mp-text-info-50    { color: hsl(200, 60%, 95%); } .mp-border-info-50    { border-color: hsl(200, 60%, 95%); }
.mp-bg-info-100   { background-color: hsl(200, 60%, 85%); } .mp-text-info-100   { color: hsl(200, 60%, 85%); } .mp-border-info-100   { border-color: hsl(200, 60%, 85%); }
.mp-bg-info-200   { background-color: hsl(200, 60%, 75%); } .mp-text-info-200   { color: hsl(200, 60%, 75%); } .mp-border-info-200   { border-color: hsl(200, 60%, 75%); }
.mp-bg-info-300   { background-color: hsl(200, 60%, 65%); } .mp-text-info-300   { color: hsl(200, 60%, 65%); } .mp-border-info-300   { border-color: hsl(200, 60%, 65%); }
.mp-bg-info-400   { background-color: hsl(200, 60%, 55%); } .mp-text-info-400   { color: hsl(200, 60%, 55%); } .mp-border-info-400   { border-color: hsl(200, 60%, 55%); }
.mp-bg-info-500   { background-color: var(--clr-info); } .mp-text-info-500   { color: var(--clr-info); } .mp-border-info-500   { border-color: var(--clr-info); }
.mp-bg-info-600   { background-color: hsl(200, 60%, 40%); } .mp-text-info-600   { color: hsl(200, 60%, 40%); } .mp-border-info-600   { border-color: hsl(200, 60%, 40%); }
.mp-bg-info-700   { background-color: hsl(200, 60%, 30%); } .mp-text-info-700   { color: hsl(200, 60%, 30%); } .mp-border-info-700   { border-color: hsl(200, 60%, 30%); }
.mp-bg-info-800   { background-color: hsl(200, 60%, 20%); } .mp-text-info-800   { color: hsl(200, 60%, 20%); } .mp-border-info-800   { border-color: hsl(200, 60%, 20%); }
.mp-bg-info-900   { background-color: hsl(200, 60%, 10%); } .mp-text-info-900   { color: hsl(200, 60%, 10%); } .mp-border-info-900   { border-color: hsl(200, 60%, 10%); }

/* Brand palette utilities: Gold, Teal/Cyan accents and Navy */
.mp-bg-gold-50   { background-color: hsl(43, 52%, 95%); } .mp-text-gold-50   { color: hsl(43, 52%, 95%); } .mp-border-gold-50   { border-color: hsl(43, 52%, 95%); }
.mp-bg-gold-100  { background-color: hsl(43, 52%, 85%); } .mp-text-gold-100  { color: hsl(43, 52%, 85%); } .mp-border-gold-100  { border-color: hsl(43, 52%, 85%); }
.mp-bg-gold-200  { background-color: hsl(43, 52%, 75%); } .mp-text-gold-200  { color: hsl(43, 52%, 75%); } .mp-border-gold-200  { border-color: hsl(43, 52%, 75%); }
.mp-bg-gold-300  { background-color: hsl(43, 52%, 65%); } .mp-text-gold-300  { color: hsl(43, 52%, 65%); } .mp-border-gold-300  { border-color: hsl(43, 52%, 65%); }
.mp-bg-gold-400  { background-color: hsl(43, 52%, 55%); } .mp-text-gold-400  { color: hsl(43, 52%, 55%); } .mp-border-gold-400  { border-color: hsl(43, 52%, 55%); }
.mp-bg-gold-500  { background-color: #C9A86A; } .mp-text-gold-500  { color: #C9A86A; } .mp-border-gold-500  { border-color: #C9A86A; }
.mp-bg-gold-600  { background-color: hsl(43, 52%, 40%); } .mp-text-gold-600  { color: hsl(43, 52%, 40%); } .mp-border-gold-600  { border-color: hsl(43, 52%, 40%); }
.mp-bg-gold-700  { background-color: hsl(43, 52%, 30%); } .mp-text-gold-700  { color: hsl(43, 52%, 30%); } .mp-border-gold-700  { border-color: hsl(43, 52%, 30%); }
.mp-bg-gold-800  { background-color: hsl(43, 52%, 20%); } .mp-text-gold-800  { color: hsl(43, 52%, 20%); } .mp-border-gold-800  { border-color: hsl(43, 52%, 20%); }
.mp-bg-gold-900  { background-color: hsl(43, 52%, 10%); } .mp-text-gold-900  { color: hsl(43, 52%, 10%); } .mp-border-gold-900  { border-color: hsl(43, 52%, 10%); }

.mp-bg-teal-50   { background-color: hsl(183, 82%, 95%); } .mp-text-teal-50   { color: hsl(183, 82%, 95%); } .mp-border-teal-50   { border-color: hsl(183, 82%, 95%); }
.mp-bg-teal-100  { background-color: hsl(183, 82%, 85%); } .mp-text-teal-100  { color: hsl(183, 82%, 85%); } .mp-border-teal-100  { border-color: hsl(183, 82%, 85%); }
.mp-bg-teal-200  { background-color: hsl(183, 82%, 75%); } .mp-text-teal-200  { color: hsl(183, 82%, 75%); } .mp-border-teal-200  { border-color: hsl(183, 82%, 75%); }
.mp-bg-teal-300  { background-color: hsl(183, 82%, 65%); } .mp-text-teal-300  { color: hsl(183, 82%, 65%); } .mp-border-teal-300  { border-color: hsl(183, 82%, 65%); }
.mp-bg-teal-400  { background-color: hsl(183, 82%, 55%); } .mp-text-teal-400  { color: hsl(183, 82%, 55%); } .mp-border-teal-400  { border-color: hsl(183, 82%, 55%); }
.mp-bg-teal-500  { background-color: #0AA0A6; } .mp-text-teal-500  { color: #0AA0A6; } .mp-border-teal-500  { border-color: #0AA0A6; }
.mp-bg-teal-600  { background-color: hsl(183, 82%, 40%); } .mp-text-teal-600  { color: hsl(183, 82%, 40%); } .mp-border-teal-600  { border-color: hsl(183, 82%, 40%); }
.mp-bg-teal-700  { background-color: hsl(183, 82%, 30%); } .mp-text-teal-700  { color: hsl(183, 82%, 30%); } .mp-border-teal-700  { border-color: hsl(183, 82%, 30%); }
.mp-bg-teal-800  { background-color: hsl(183, 82%, 20%); } .mp-text-teal-800  { color: hsl(183, 82%, 20%); } .mp-border-teal-800  { border-color: hsl(183, 82%, 20%); }
.mp-bg-teal-900  { background-color: hsl(183, 82%, 10%); } .mp-text-teal-900  { color: hsl(183, 82%, 10%); } .mp-border-teal-900  { border-color: hsl(183, 82%, 10%); }

.mp-bg-navy-50   { background-color: hsl(218, 46%, 95%); } .mp-text-navy-50   { color: hsl(218, 46%, 95%); } .mp-border-navy-50   { border-color: hsl(218, 46%, 95%); }
.mp-bg-navy-100  { background-color: hsl(218, 46%, 85%); } .mp-text-navy-100  { color: hsl(218, 46%, 85%); } .mp-border-navy-100  { border-color: hsl(218, 46%, 85%); }
.mp-bg-navy-200  { background-color: hsl(218, 46%, 75%); } .mp-text-navy-200  { color: hsl(218, 46%, 75%); } .mp-border-navy-200  { border-color: hsl(218, 46%, 75%); }
.mp-bg-navy-300  { background-color: hsl(218, 46%, 65%); } .mp-text-navy-300  { color: hsl(218, 46%, 65%); } .mp-border-navy-300  { border-color: hsl(218, 46%, 65%); }
.mp-bg-navy-400  { background-color: hsl(218, 46%, 55%); } .mp-text-navy-400  { color: hsl(218, 46%, 55%); } .mp-border-navy-400  { border-color: hsl(218, 46%, 55%); }
.mp-bg-navy-500  { background-color: #0E1B2C; } .mp-text-navy-500  { color: #0E1B2C; } .mp-border-navy-500  { border-color: #0E1B2C; }
.mp-bg-navy-600  { background-color: hsl(218, 46%, 40%); } .mp-text-navy-600  { color: hsl(218, 46%, 40%); } .mp-border-navy-600  { border-color: hsl(218, 46%, 40%); }
.mp-bg-navy-700  { background-color: hsl(218, 46%, 30%); } .mp-text-navy-700  { color: hsl(218, 46%, 30%); } .mp-border-navy-700  { border-color: hsl(218, 46%, 30%); }
.mp-bg-navy-800  { background-color: hsl(218, 46%, 20%); } .mp-text-navy-800  { color: hsl(218, 46%, 20%); } .mp-border-navy-800  { border-color: hsl(218, 46%, 20%); }
.mp-bg-navy-900  { background-color: hsl(218, 46%, 10%); } .mp-text-navy-900  { color: hsl(218, 46%, 10%); } .mp-border-navy-900  { border-color: hsl(218, 46%, 10%); }

/* ---------- 3.25 Custom Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--clr-border-light); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb { background: var(--clr-muted); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-light); }

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* ---------- 4.1 Buttons ---------- */
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.5em 1.25em; border: 2px solid transparent; border-radius: var(--radius-md);
  font-weight: var(--fw-medium); line-height: 1.4; cursor: pointer;
  transition: all var(--transition-fast); text-decoration: none; user-select: none; white-space: nowrap;
}
.mp-btn:hover { filter: brightness(1.1); text-decoration: none; }
.mp-btn:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }

.mp-btn-primary   { background: var(--clr-primary); color: var(--clr-primary-text); border-color: var(--clr-primary); }
.mp-btn-secondary { background: var(--clr-surface); color: var(--clr-text); border-color: var(--clr-border); }
.mp-btn-success   { background: var(--clr-success); color: #fff; border-color: var(--clr-success); }
.mp-btn-danger    { background: var(--clr-danger); color: #fff; border-color: var(--clr-danger); }
.mp-btn-warning   { background: var(--clr-warning); color: #000; border-color: var(--clr-warning); }
.mp-btn-info      { background: var(--clr-info); color: #000; border-color: var(--clr-info); }
.mp-btn-outline   { background: transparent; color: var(--clr-primary); border-color: var(--clr-primary); }
.mp-btn-outline:hover { background: var(--clr-primary); color: var(--clr-primary-text); }
.mp-btn-ghost     { background: transparent; color: var(--clr-text); border-color: transparent; }
.mp-btn-ghost:hover { background: var(--clr-border-light); }

.mp-btn-sm { padding: 0.25em 0.75em; font-size: var(--fs-sm); }
.mp-btn-lg { padding: 0.65em 1.75em; font-size: var(--fs-md); }
.mp-btn-xl { padding: 0.8em 2.2em; font-size: var(--fs-lg); }

.mp-btn-pill { border-radius: var(--radius-full); }

.mp-btn:disabled, .mp-btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

.mp-btn-group { display: inline-flex; gap: 0; }
.mp-btn-group .mp-btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mp-btn-group .mp-btn:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---------- 4.2 Cards ---------- */
.mp-card {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: box-shadow var(--transition-normal);
}
.mp-card:hover { box-shadow: var(--shadow-md); }
.mp-card-img       { width: 100%; object-fit: cover; }
.mp-card-body      { padding: var(--space-4); }
.mp-card-header    { padding: var(--space-4); border-bottom: 1px solid var(--clr-border); font-weight: var(--fw-semibold); }
.mp-card-footer    { padding: var(--space-4); border-top: 1px solid var(--clr-border); }
.mp-card-horizontal { display: flex; flex-direction: row; }
.mp-card-horizontal .mp-card-img { width: 40%; flex-shrink: 0; }
@media (max-width: 640px) {
  .mp-card-horizontal { flex-direction: column; }
  .mp-card-horizontal .mp-card-img { width: 100%; }
}

/* ---------- 4.3 Navbar ---------- */
.mp-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6); background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border); flex-wrap: wrap;
}
.mp-nav-brand { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--clr-text); text-decoration: none; }
.mp-nav-links { display: flex; gap: var(--space-4); list-style: none; }
.mp-nav-links a { color: var(--clr-text-light); transition: color var(--transition-fast); }
.mp-nav-links a:hover { color: var(--clr-primary); text-decoration: none; }
.mp-nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--clr-text); }
@media (max-width: 768px) {
  .mp-nav-links { display: none; flex-direction: column; width: 100%; padding: var(--space-4) 0; }
  .mp-nav-links.active { display: flex; }
  .mp-nav-toggle { display: block; }
}

/* ---------- 4.4 Forms ---------- */
.mp-form-group { margin-bottom: var(--space-4); }
.mp-label { display: block; margin-bottom: var(--space-1); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.mp-input, .mp-select, .mp-textarea {
  width: 100%; padding: 0.5em 0.75em; border: 1px solid var(--clr-border);
  border-radius: var(--radius-md); background: var(--clr-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.mp-input:focus, .mp-select:focus, .mp-textarea:focus {
  outline: none; border-color: var(--clr-primary); box-shadow: 0 0 0 3px var(--clr-primary-light);
}
.mp-textarea { resize: vertical; min-height: 100px; }
.mp-checkbox, .mp-radio { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }

/* Input Group */
.mp-input-group {
  display: flex; align-items: stretch; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--clr-border);
}
.mp-input-group .mp-input, .mp-input-group .mp-select { border: none; border-radius: 0; flex: 1 1 auto; }
.mp-input-group .mp-input:focus, .mp-input-group .mp-select:focus { box-shadow: none; }
.mp-input-group-prepend, .mp-input-group-append {
  display: flex; align-items: center; padding: 0 0.75em;
  background: var(--clr-border-light); color: var(--clr-text-light); font-size: var(--fs-sm);
  white-space: nowrap;
}
.mp-input-group .mp-btn { border-radius: 0; }

/* Floating Label */
.mp-form-floating { position: relative; }
.mp-form-floating .mp-input, .mp-form-floating .mp-select, .mp-form-floating .mp-textarea {
  height: calc(2.5rem + 2px); padding: 1.25rem 0.75rem 0.25rem; line-height: 1.25;
}
.mp-form-floating .mp-label {
  position: absolute; top: 50%; left: 0.75rem; transform: translateY(-50%);
  transition: all 0.15s ease-in-out; pointer-events: none; font-size: var(--fs-base); color: var(--clr-text-light);
}
.mp-form-floating .mp-input:focus ~ .mp-label,
.mp-form-floating .mp-input:not(:placeholder-shown) ~ .mp-label,
.mp-form-floating .mp-select:focus ~ .mp-label,
.mp-form-floating .mp-select:not([value=""]) ~ .mp-label {
  top: 0.5rem; transform: translateY(0); font-size: var(--fs-xs); color: var(--clr-primary);
}

/* Range input */
.mp-range {
  width: 100%; -webkit-appearance: none; appearance: none; height: 6px;
  background: var(--clr-border); border-radius: var(--radius-full); outline: none;
}
.mp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--clr-primary); cursor: pointer; border: none;
}

/* File input */
.mp-file { display: block; width: 100%; font-size: var(--fs-sm); }
.mp-file::file-selector-button {
  margin-right: var(--space-2); padding: 0.4em 0.8em; border: 1px solid var(--clr-border);
  border-radius: var(--radius-md); background: var(--clr-surface); color: var(--clr-text); cursor: pointer;
}
.mp-file::file-selector-button:hover { background: var(--clr-border-light); }

/* Toggle Switch */
.mp-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.mp-toggle input { opacity: 0; width: 0; height: 0; }
.mp-toggle-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--clr-muted); border-radius: var(--radius-full); transition: var(--transition-fast);
}
.mp-toggle-slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: var(--transition-fast);
}
.mp-toggle input:checked + .mp-toggle-slider { background: var(--clr-primary); }
.mp-toggle input:checked + .mp-toggle-slider::before { transform: translateX(20px); }

/* Validation */
.mp-input.is-valid, .mp-select.is-valid { border-color: var(--clr-success); }
.mp-input.is-invalid, .mp-select.is-invalid { border-color: var(--clr-danger); }
.mp-feedback-valid { color: var(--clr-success); font-size: var(--fs-sm); }
.mp-feedback-invalid { color: var(--clr-danger); font-size: var(--fs-sm); }

/* ---------- 4.5 Alerts ---------- */
.mp-alert {
  padding: var(--space-4); border-radius: var(--radius-md); border-left: 4px solid transparent;
  background: var(--clr-surface); margin-bottom: var(--space-4); position: relative;
}
.mp-alert-primary { border-color: var(--clr-primary); background: var(--clr-primary-light); color: var(--clr-primary); }
.mp-alert-success { border-color: var(--clr-success); background: hsl(140, 50%, 90%); color: var(--clr-success); }
.mp-alert-danger  { border-color: var(--clr-danger);  background: hsl(0, 70%, 90%);  color: var(--clr-danger); }
.mp-alert-warning { border-color: var(--clr-warning); background: hsl(35, 90%, 90%);  color: var(--clr-warning); }
.mp-alert-info    { border-color: var(--clr-info);    background: hsl(200, 60%, 90%);  color: var(--clr-info); }
.mp-alert .mp-alert-close {
  position: absolute; top: var(--space-2); right: var(--space-2); background: none; border: none;
  cursor: pointer; font-size: 1.2rem; color: inherit; opacity: 0.7;
}

/* ---------- 4.6 Badges ---------- */
.mp-badge {
  display: inline-flex; align-items: center; padding: 0.15em 0.6em;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); border-radius: var(--radius-full);
  background: var(--clr-primary); color: var(--clr-primary-text);
}
.mp-badge-secondary { background: var(--clr-muted); color: #fff; }
.mp-badge-success   { background: var(--clr-success); }
.mp-badge-danger    { background: var(--clr-danger); }
.mp-badge-warning   { background: var(--clr-warning); color: #000; }
.mp-badge-outline   { background: transparent; color: var(--clr-primary); border: 1px solid var(--clr-primary); }

/* ---------- 4.7 Tooltips ---------- */
.mp-tooltip {
  position: relative; cursor: help;
}
.mp-tooltip::after {
  content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--clr-text); color: var(--clr-bg); font-size: var(--fs-xs); padding: 0.3em 0.6em;
  border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--transition-fast);
}
.mp-tooltip:hover::after { opacity: 1; }

/* ---------- 4.8 Spinner ---------- */
.mp-spinner {
  width: 1.5em; height: 1.5em; border: 3px solid var(--clr-border);
  border-top-color: var(--clr-primary); border-radius: 50%;
  animation: mp-spin 0.8s linear infinite; display: inline-block;
}
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* ---------- 4.9 Skeleton ---------- */
.mp-skeleton {
  background: linear-gradient(90deg, var(--clr-border-light) 25%, var(--clr-muted) 50%, var(--clr-border-light) 75%);
  background-size: 200% 100%; animation: mp-skeleton 1.5s infinite; border-radius: var(--radius-md);
}
@keyframes mp-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- 4.10 Modal ---------- */
.mp-modal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000;
  align-items: center; justify-content: center; padding: var(--space-4);
}
.mp-modal.active { display: flex; }
.mp-modal-content {
  background: var(--clr-surface); border-radius: var(--radius-lg); max-width: 500px; width: 100%;
  box-shadow: var(--shadow-xl); overflow: hidden;
}
.mp-modal-sm .mp-modal-content { max-width: 350px; }
.mp-modal-lg .mp-modal-content { max-width: 700px; }
.mp-modal-xl .mp-modal-content { max-width: 900px; }
.mp-modal-header {
  padding: var(--space-4); border-bottom: 1px solid var(--clr-border);
  display: flex; justify-content: space-between; align-items: center;
}
.mp-modal-body   { padding: var(--space-4); }
.mp-modal-footer {
  padding: var(--space-4); border-top: 1px solid var(--clr-border);
  display: flex; justify-content: flex-end; gap: var(--space-2);
}

/* ---------- 4.11 Dropdown ---------- */
.mp-dropdown { position: relative; display: inline-block; }
.mp-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 900; min-width: 160px;
  background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: var(--space-1) 0;
}
.mp-dropdown-menu.active { display: block; }
.mp-dropdown-right .mp-dropdown-menu { left: auto; right: 0; }
.mp-dropdown-item {
  display: block; width: 100%; padding: var(--space-2) var(--space-4); text-align: left;
  background: none; border: none; font-size: var(--fs-sm); color: var(--clr-text); cursor: pointer;
}
.mp-dropdown-item:hover { background: var(--clr-border-light); }

/* ---------- 4.12 Tabs ---------- */
.mp-tabs { display: flex; border-bottom: 2px solid var(--clr-border); margin-bottom: var(--space-4); }
.mp-tab-btn {
  padding: var(--space-2) var(--space-4); background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer;
  color: var(--clr-text-light); transition: color var(--transition-fast), border-color var(--transition-fast);
}
.mp-tab-btn.active { color: var(--clr-primary); border-bottom-color: var(--clr-primary); }
.mp-tab-panel { display: none; }
.mp-tab-panel.active { display: block; }

/* ---------- 4.13 Accordion ---------- */
.mp-accordion-item {
  border: 1px solid var(--clr-border); border-radius: var(--radius-md); margin-bottom: var(--space-2); overflow: hidden;
}
.mp-accordion-header {
  width: 100%; padding: var(--space-3) var(--space-4); background: var(--clr-surface); border: none;
  text-align: left; font-weight: var(--fw-medium); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.mp-accordion-header::after { content: "+"; font-size: 1.2em; transition: transform 0.3s; }
.mp-accordion-content.active + .mp-accordion-header::after { content: "−"; }
.mp-accordion-content {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--clr-bg);
}
.mp-accordion-content.active { max-height: 500px; }
.mp-accordion-body { padding: var(--space-4); }

/* ---------- 4.14 Table ---------- */
.mp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.mp-table th, .mp-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--clr-border); }
.mp-table thead th { background: var(--clr-border-light); font-weight: var(--fw-semibold); color: var(--clr-text); }
.mp-table tbody tr:hover { background: var(--clr-border-light); }
.mp-table-striped tbody tr:nth-child(even) { background: var(--clr-border-light); }

/* ---------- 4.15 List Group ---------- */
.mp-list-group { border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; background: var(--clr-surface); }
.mp-list-item { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--clr-border); display: flex; align-items: center; gap: var(--space-2); }
.mp-list-item:last-child { border-bottom: none; }
.mp-list-item.active { background: var(--clr-primary-light); color: var(--clr-primary); }

/* ---------- 4.16 Progress Bar ---------- */
.mp-progress { width: 100%; height: 10px; background: var(--clr-border-light); border-radius: var(--radius-full); overflow: hidden; }
.mp-progress-bar { height: 100%; background: var(--clr-primary); border-radius: var(--radius-full); transition: width 0.3s ease; }
.mp-progress-bar-success { background: var(--clr-success); }
.mp-progress-bar-danger  { background: var(--clr-danger); }
.mp-progress-bar-warning { background: var(--clr-warning); }

/* ---------- 4.17 Breadcrumb ---------- */
.mp-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; font-size: var(--fs-sm); color: var(--clr-text-light); }
.mp-breadcrumb-item + .mp-breadcrumb-item::before { content: "/"; margin-right: var(--space-2); color: var(--clr-muted); }
.mp-breadcrumb-item a { color: var(--clr-primary); }
.mp-breadcrumb-item.active { color: var(--clr-text); font-weight: var(--fw-medium); }

/* ---------- 4.18 Pagination ---------- */
.mp-pagination { display: flex; gap: var(--space-1); list-style: none; }
.mp-page-item .mp-page-link {
  display: block; padding: 0.4em 0.8em; border: 1px solid var(--clr-border); border-radius: var(--radius-md);
  background: var(--clr-surface); color: var(--clr-text); text-decoration: none; transition: background var(--transition-fast);
}
.mp-page-item .mp-page-link:hover { background: var(--clr-border-light); }
.mp-page-item.active .mp-page-link { background: var(--clr-primary); color: var(--clr-primary-text); border-color: var(--clr-primary); }
.mp-page-item.disabled .mp-page-link { opacity: 0.5; pointer-events: none; }

/* ---------- 4.19 Avatar & Avatar Group ---------- */
.mp-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--clr-muted);
  color: #fff; font-weight: var(--fw-bold); overflow: hidden; vertical-align: middle;
}
.mp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-avatar-sm { width: 30px; height: 30px; font-size: var(--fs-xs); }
.mp-avatar-lg { width: 56px; height: 56px; font-size: var(--fs-md); }

.mp-avatar-group { display: flex; }
.mp-avatar-group .mp-avatar:not(:first-child) { margin-left: -0.75rem; border: 2px solid var(--clr-surface); }

/* ---------- 4.20 Divider ---------- */
.mp-divider { border: 0; border-top: 1px solid var(--clr-border); margin: var(--space-4) 0; }

/* ---------- 4.21 Off‑canvas Positions ---------- */
.mp-offcanvas {
  position: fixed; top: 0; bottom: 0; width: 300px; max-width: 80vw;
  background: var(--clr-surface); box-shadow: var(--shadow-xl); z-index: 1040;
  transition: transform 0.3s ease; overflow-y: auto;
}
.mp-offcanvas-left { left: 0; transform: translateX(-100%); }
.mp-offcanvas-left.active { transform: translateX(0); }
.mp-offcanvas-right { right: 0; transform: translateX(100%); }
.mp-offcanvas-right.active { transform: translateX(0); }
.mp-offcanvas-top { left: 0; right: 0; height: 300px; width: 100%; max-height: 50vh; bottom: auto; top: 0; transform: translateY(-100%); }
.mp-offcanvas-top.active { transform: translateY(0); }
.mp-offcanvas-bottom { left: 0; right: 0; height: 300px; width: 100%; max-height: 50vh; top: auto; bottom: 0; transform: translateY(100%); }
.mp-offcanvas-bottom.active { transform: translateY(0); }

/* ==========================================================================
   5. ANIMATIONS KEYFRAMES
   ========================================================================== */
@keyframes mp-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mp-slideInUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes mp-slideInDown { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes mp-slideInLeft { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes mp-slideInRight { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes mp-zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ==========================================================================
   6. RTL SUPPORT
   ========================================================================== */
  /* Text alignment */
  [dir="rtl"] .mp-text-left { text-align: right; }
  [dir="rtl"] .mp-text-right { text-align: left; }

  /* Flex direction */
  [dir="rtl"] .mp-flex-row { flex-direction: row-reverse; }

  /* Spacing directional overrides */
  [dir="rtl"] .mp-ml-0  { margin-left: 0; margin-right: var(--space-0); } [dir="rtl"] .mp-mr-0  { margin-right: 0; margin-left: var(--space-0); }
  [dir="rtl"] .mp-ml-1  { margin-left: 0; margin-right: var(--space-1); } [dir="rtl"] .mp-mr-1  { margin-right: 0; margin-left: var(--space-1); }
  [dir="rtl"] .mp-ml-2  { margin-left: 0; margin-right: var(--space-2); } [dir="rtl"] .mp-mr-2  { margin-right: 0; margin-left: var(--space-2); }
  [dir="rtl"] .mp-ml-3  { margin-left: 0; margin-right: var(--space-3); } [dir="rtl"] .mp-mr-3  { margin-right: 0; margin-left: var(--space-3); }
  [dir="rtl"] .mp-ml-4  { margin-left: 0; margin-right: var(--space-4); } [dir="rtl"] .mp-mr-4  { margin-right: 0; margin-left: var(--space-4); }
  [dir="rtl"] .mp-ml-5  { margin-left: 0; margin-right: var(--space-5); } [dir="rtl"] .mp-mr-5  { margin-right: 0; margin-left: var(--space-5); }
  [dir="rtl"] .mp-ml-6  { margin-left: 0; margin-right: var(--space-6); } [dir="rtl"] .mp-mr-6  { margin-right: 0; margin-left: var(--space-6); }
  [dir="rtl"] .mp-ml-8  { margin-left: 0; margin-right: var(--space-8); } [dir="rtl"] .mp-mr-8  { margin-right: 0; margin-left: var(--space-8); }
  [dir="rtl"] .mp-ml-10 { margin-left: 0; margin-right: var(--space-10); } [dir="rtl"] .mp-mr-10 { margin-right: 0; margin-left: var(--space-10); }
  [dir="rtl"] .mp-ml-12 { margin-left: 0; margin-right: var(--space-12); } [dir="rtl"] .mp-mr-12 { margin-right: 0; margin-left: var(--space-12); }
  [dir="rtl"] .mp-ml-16 { margin-left: 0; margin-right: var(--space-16); } [dir="rtl"] .mp-mr-16 { margin-right: 0; margin-left: var(--space-16); }
  [dir="rtl"] .mp-ml-auto { margin-left: 0; margin-right: auto; } [dir="rtl"] .mp-mr-auto { margin-right: 0; margin-left: auto; }

  /* Symmetric padding utilities require no RTL override. */

  /* Border radius directional (if needed) */
  [dir="rtl"] .mp-rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
  [dir="rtl"] .mp-rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }

  /* Dropdown alignment */
  [dir="rtl"] .mp-dropdown-menu { left: auto; right: 0; }
  [dir="rtl"] .mp-dropdown-right .mp-dropdown-menu { left: 0; right: auto; }

  /* Off‑canvas */
  [dir="rtl"] .mp-offcanvas-left { left: auto; right: 0; transform: translateX(100%); }
  [dir="rtl"] .mp-offcanvas-left.active { transform: translateX(0); }
  [dir="rtl"] .mp-offcanvas-right { left: 0; right: auto; transform: translateX(-100%); }
  [dir="rtl"] .mp-offcanvas-right.active { transform: translateX(0); }

  /* Input groups */
  [dir="rtl"] .mp-input-group-prepend { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
  [dir="rtl"] .mp-input-group-append { border-radius: var(--radius-md) 0 0 var(--radius-md); }
  [dir="rtl"] .mp-input-group .mp-input:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
  [dir="rtl"] .mp-input-group .mp-input:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   8. PRINT STYLES
   ========================================================================== */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .mp-nav, .mp-modal, .mp-offcanvas, .mp-toast-container, .mp-back-to-top { display: none !important; }
  .mp-container { max-width: 100%; padding: 0; }
  .mp-card { box-shadow: none; border: 1px solid #ccc; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
}


/* ========================================================================== 
   9. UNIVERSAL EXTENSION TOKENS
   Project-neutral tokens used by the extended component and utility library.
   ========================================================================== */
:root {
  color-scheme: light;

  --mp-content-xs: 30rem;
  --mp-content-sm: 42rem;
  --mp-content-md: 64rem;
  --mp-content-lg: 80rem;
  --mp-content-xl: 96rem;
  --mp-content-full: 100%;

  --mp-header-height: 4rem;
  --mp-sidebar-width: 17rem;
  --mp-sidebar-collapsed-width: 4.75rem;
  --mp-bottom-nav-height: 4rem;
  --mp-control-height-sm: 2rem;
  --mp-control-height: 2.6rem;
  --mp-control-height-lg: 3.1rem;

  --mp-z-base: 0;
  --mp-z-sticky: 100;
  --mp-z-header: 300;
  --mp-z-dropdown: 500;
  --mp-z-overlay: 900;
  --mp-z-modal: 1000;
  --mp-z-toast: 1300;
  --mp-z-tooltip: 1400;

  --mp-overlay: rgba(6, 13, 22, .58);
  --mp-focus: color-mix(in srgb, var(--clr-info) 72%, white);
  --mp-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mp-focus) 35%, transparent);

  --mp-success-soft: color-mix(in srgb, var(--clr-success) 12%, var(--clr-surface));
  --mp-warning-soft: color-mix(in srgb, var(--clr-warning) 14%, var(--clr-surface));
  --mp-danger-soft: color-mix(in srgb, var(--clr-danger) 11%, var(--clr-surface));
  --mp-info-soft: color-mix(in srgb, var(--clr-info) 11%, var(--clr-surface));
  --mp-primary-soft: color-mix(in srgb, var(--clr-primary) 13%, var(--clr-surface));

  --mp-header-bg: var(--mp-navy);
  --mp-header-text: #f4f7fb;
  --mp-header-muted: #b7c3d0;
  --mp-header-hover: rgba(255,255,255,.10);
  --mp-header-active: color-mix(in srgb, var(--clr-primary) 22%, transparent);
  --mp-sidebar-bg: var(--mp-header-bg);
  --mp-sidebar-text: var(--mp-header-text);
  --mp-sidebar-muted: var(--mp-header-muted);
  --mp-sidebar-border: rgba(255,255,255,.11);

  /* Readable foreground variants for text placed on ordinary surfaces. */
  --clr-primary-ink: #76551d;
  --clr-success-ink: #176142;
  --clr-warning-ink: #754500;
  --clr-danger-ink: #8b3030;
  --clr-info-ink: #05666b;

  /* Common vocabulary aliases for legacy templates and rapid adoption. */
  --ink: var(--clr-text);
  --muted: var(--clr-text-light);
  --line: var(--clr-border);
  --line-strong: color-mix(in srgb, var(--clr-text) 28%, transparent);
  --surface: var(--clr-surface);
  --surface-soft: color-mix(in srgb, var(--clr-surface) 88%, var(--clr-bg));
  --surface-tint: var(--mp-primary-soft);
  --primary: var(--clr-primary);
  --primary-dark: var(--clr-primary-hover);
  --accent: var(--mp-gold-dark);
  --success: var(--clr-success);
  --warning: var(--clr-warning);
  --danger: var(--clr-danger);
  --info: var(--clr-info);
}

[data-theme="light"] {
  color-scheme: light;
  --clr-primary-ink: var(--mp-navy-light);
  --clr-success-ink: #176142;
  --clr-warning-ink: #754500;
  --clr-danger-ink: #8b3030;
  --clr-info-ink: #05666b;
  --mp-header-bg: #ffffff;
  --mp-header-text: var(--mp-navy);
  --mp-header-muted: #657487;
  --mp-header-hover: rgba(var(--mp-navy-rgb), .07);
  --mp-header-active: rgba(var(--mp-navy-rgb), .10);
  --mp-sidebar-bg: #ffffff;
  --mp-sidebar-text: var(--mp-navy);
  --mp-sidebar-muted: #657487;
  --mp-sidebar-border: rgba(var(--mp-navy-rgb), .11);
}

[data-theme="gold"] {
  color-scheme: light;
  --clr-primary-ink: #76551d;
  --clr-success-ink: #176142;
  --clr-warning-ink: #754500;
  --clr-danger-ink: #8b3030;
  --clr-info-ink: #05666b;
  --mp-header-bg: #f3ead7;
  --mp-header-text: var(--mp-navy);
  --mp-header-muted: #6e6657;
  --mp-header-hover: rgba(var(--mp-gold-rgb), .20);
  --mp-header-active: rgba(var(--mp-gold-rgb), .30);
  --mp-sidebar-bg: #f8f1e4;
  --mp-sidebar-text: var(--mp-navy);
  --mp-sidebar-muted: #6e6657;
  --mp-sidebar-border: rgba(var(--mp-navy-rgb), .12);
}

[data-theme="navy"] {
  color-scheme: dark;
  --clr-primary-ink: var(--mp-teal-light);
  --clr-success-ink: #73d7ad;
  --clr-warning-ink: #f0bd6a;
  --clr-danger-ink: #f08f8f;
  --clr-info-ink: var(--mp-teal-light);
  --mp-header-bg: var(--mp-navy-dark);
  --mp-header-text: #f5f8fb;
  --mp-header-muted: #aebccb;
  --mp-header-hover: rgba(255,255,255,.09);
  --mp-header-active: rgba(var(--mp-teal-rgb), .17);
  --mp-sidebar-bg: var(--mp-navy-dark);
  --mp-sidebar-text: #f5f8fb;
  --mp-sidebar-muted: #aebccb;
  --mp-sidebar-border: rgba(255,255,255,.12);
}

[data-density="compact"] {
  --mp-control-height-sm: 1.8rem;
  --mp-control-height: 2.25rem;
  --mp-control-height-lg: 2.7rem;
  --space-3: .625rem;
  --space-4: .85rem;
  --space-5: 1rem;
  --space-6: 1.25rem;
}

/* Readable text colours preserve the visual theme without sacrificing contrast. */
a { color: var(--clr-primary-ink); }
a:hover { color: var(--clr-primary-hover); }
.mp-text-primary, .mp-text-primary-500 { color: var(--clr-primary-ink); }
.mp-text-success, .mp-text-success-500 { color: var(--clr-success-ink); }
.mp-text-warning, .mp-text-warning-500 { color: var(--clr-warning-ink); }
.mp-text-danger, .mp-text-danger-500 { color: var(--clr-danger-ink); }
.mp-text-info, .mp-text-info-500 { color: var(--clr-info-ink); }

/* ========================================================================== 
   10. ACCESSIBILITY, FOCUS AND GLOBAL HELPERS
   ========================================================================== */
.mp-sr-only,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mp-not-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

.mp-skip-link,
.skip-link {
  position: fixed;
  z-index: calc(var(--mp-z-tooltip) + 10);
  top: .5rem;
  left: .5rem;
  transform: translateY(-180%);
  padding: .65rem 1rem;
  border-radius: var(--radius-md);
  background: var(--mp-navy-dark);
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.mp-skip-link:focus,
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--mp-focus);
  outline-offset: 2px;
  box-shadow: var(--mp-focus-ring);
}

.mp-focus-ring:focus,
.mp-focus-ring:focus-visible { outline: 2px solid var(--mp-focus); outline-offset: 2px; box-shadow: var(--mp-focus-ring); }
.mp-focus-none:focus,
.mp-focus-none:focus-visible { outline: none !important; box-shadow: none !important; }

[hidden], .mp-hidden { display: none !important; }
[aria-disabled="true"], .mp-disabled { cursor: not-allowed !important; opacity: .62; pointer-events: none; }
.mp-inert { pointer-events: none; user-select: none; opacity: .62; }
.mp-no-scroll { overflow: hidden !important; }
.mp-scroll-mt-header { scroll-margin-top: calc(var(--mp-header-height) + 1rem); }

/* ========================================================================== 
   11. PROJECT-AGNOSTIC LAYOUT SYSTEMS
   ========================================================================== */
.mp-container-xs { width: min(calc(100% - 2rem), var(--mp-content-xs)); margin-inline: auto; }
.mp-container-sm { width: min(calc(100% - 2rem), var(--mp-content-sm)); margin-inline: auto; }
.mp-container-md { width: min(calc(100% - 2rem), var(--mp-content-md)); margin-inline: auto; }
.mp-container-lg { width: min(calc(100% - 2rem), var(--mp-content-lg)); margin-inline: auto; }
.mp-container-xl { width: min(calc(100% - 2rem), var(--mp-content-xl)); margin-inline: auto; }

.mp-app-shell,
.app-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--clr-bg); }
.mp-app-body { min-height: 0; flex: 1 1 auto; display: flex; }
.mp-workspace { min-height: 100vh; display: grid; grid-template-columns: var(--mp-sidebar-width) minmax(0, 1fr); }
.mp-workspace-main { min-width: 0; display: flex; flex-direction: column; }
.mp-page-main { width: 100%; max-width: var(--mp-content-xl); margin-inline: auto; padding: clamp(1rem, 2.2vw, 2rem); }
.mp-page-main-fluid { width: 100%; padding: clamp(.85rem, 2vw, 1.5rem); }
.mp-page-section + .mp-page-section { margin-top: clamp(1rem, 2vw, 1.75rem); }

.mp-stack { display: flex; flex-direction: column; gap: var(--stack-space, var(--space-4)); }
.mp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-space, var(--space-3)); }
.mp-center { box-sizing: content-box; max-width: var(--center-width, var(--mp-content-sm)); margin-inline: auto; padding-inline: var(--center-gutter, var(--space-4)); }
.mp-cover { min-height: var(--cover-height, 100vh); display: flex; flex-direction: column; padding: var(--space-4); }
.mp-cover > .mp-cover-centered { margin-block: auto; }
.mp-switcher { display: flex; flex-wrap: wrap; gap: var(--switcher-gap, var(--space-4)); }
.mp-switcher > * { flex-grow: 1; flex-basis: calc((var(--switcher-threshold, 48rem) - 100%) * 999); }
.mp-reel { display: flex; gap: var(--reel-gap, var(--space-4)); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-2); }
.mp-reel > * { flex: 0 0 var(--reel-item-width, 18rem); scroll-snap-align: start; }

.mp-split-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, var(--split-side, 22rem)); gap: var(--space-6); align-items: start; }
.mp-split-layout-reverse { grid-template-columns: minmax(16rem, var(--split-side, 22rem)) minmax(0, 1fr); }
.mp-sidebar-layout { display: grid; grid-template-columns: minmax(14rem, var(--sidebar-layout-width, 18rem)) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.mp-sidebar-layout-right { grid-template-columns: minmax(0, 1fr) minmax(14rem, var(--sidebar-layout-width, 18rem)); }
.mp-sidebar-layout > .mp-sticky-region,
.mp-split-layout > .mp-sticky-region { position: sticky; top: calc(var(--mp-header-height) + var(--space-4)); }

.mp-auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--auto-grid-min, 16rem)), 1fr)); gap: var(--auto-grid-gap, var(--space-4)); }
.mp-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); }
.mp-masonry { columns: var(--masonry-columns, 3) var(--masonry-width, 18rem); column-gap: var(--space-4); }
.mp-masonry > * { break-inside: avoid; margin-bottom: var(--space-4); }

.mp-page-header,
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--clr-border);
  border-inline-start: 4px solid var(--clr-primary);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--clr-surface), color-mix(in srgb, var(--clr-bg) 72%, var(--clr-surface)));
  box-shadow: var(--shadow-sm);
}
.mp-page-header-content { min-width: 0; max-width: 64rem; }
.mp-page-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.mp-page-kicker,
.mp-eyebrow,
.eyebrow { display: block; margin-bottom: var(--space-1); color: var(--clr-primary-hover); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.mp-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.mp-section-header-content { min-width: 0; }
.mp-section-header-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ========================================================================== 
   12. UNIVERSAL HEADER, NAVIGATION, SIDEBAR AND ACCOUNT COMPONENTS
   ========================================================================== */
.mp-site-header,
.site-header { position: sticky; z-index: var(--mp-z-header); top: 0; color: var(--mp-header-text); background: color-mix(in srgb, var(--mp-header-bg) 96%, transparent); border-bottom: 1px solid var(--mp-sidebar-border); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
.mp-site-header-inner { min-height: var(--mp-header-height); display: flex; align-items: center; gap: var(--space-4); width: min(calc(100% - 2rem), var(--mp-content-xl)); margin-inline: auto; }
.mp-brand,
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--mp-header-text); font-weight: var(--fw-bold); text-decoration: none; }
.mp-brand:hover,
.brand:hover { color: var(--mp-header-text); text-decoration: none; }
.mp-brand-mark { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--clr-primary); color: var(--clr-primary-text); box-shadow: var(--shadow-sm); }
.mp-brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-nav-links { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-1); }
.mp-nav-link { min-height: 2.35rem; display: inline-flex; align-items: center; gap: var(--space-2); padding: .45rem .7rem; border-radius: var(--radius-md); color: var(--mp-header-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; }
.mp-nav-link:hover { color: var(--mp-header-text); background: var(--mp-header-hover); text-decoration: none; }
.mp-nav-link.active,
.mp-nav-link[aria-current="page"] { color: var(--mp-header-text); background: var(--mp-header-active); }
.mp-nav-toggle { display: none; margin-inline-start: auto; min-width: 2.5rem; min-height: 2.5rem; place-items: center; border: 1px solid var(--mp-sidebar-border); border-radius: var(--radius-md); background: transparent; color: var(--mp-header-text); cursor: pointer; }

.mp-sidebar,
.sidebar { position: sticky; top: 0; z-index: var(--mp-z-sticky); width: var(--mp-sidebar-width); height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--mp-sidebar-text); background: var(--mp-sidebar-bg); border-inline-end: 1px solid var(--mp-sidebar-border); transition: width var(--transition-normal), transform var(--transition-normal); }
.mp-sidebar-header { min-height: var(--mp-header-height); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--mp-sidebar-border); }
.mp-sidebar-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: var(--space-3); }
.mp-sidebar-footer { padding: var(--space-3); border-top: 1px solid var(--mp-sidebar-border); }
.mp-sidebar-section + .mp-sidebar-section { margin-top: var(--space-5); }
.mp-sidebar-label { padding-inline: .65rem; margin-bottom: var(--space-2); color: var(--mp-sidebar-muted); font-size: .7rem; font-weight: var(--fw-bold); letter-spacing: .10em; text-transform: uppercase; }
.mp-sidebar-nav { display: grid; gap: .2rem; }
.mp-sidebar-link { min-height: 2.55rem; display: flex; align-items: center; gap: var(--space-3); padding: .55rem .7rem; border-radius: var(--radius-md); color: var(--mp-sidebar-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; }
.mp-sidebar-link:hover { color: var(--mp-sidebar-text); background: var(--mp-header-hover); text-decoration: none; }
.mp-sidebar-link.active,
.mp-sidebar-link[aria-current="page"] { color: var(--mp-sidebar-text); background: var(--mp-header-active); box-shadow: inset 3px 0 0 var(--clr-primary); }
.mp-sidebar-icon { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; display: grid; place-items: center; }
.mp-sidebar-badge { margin-inline-start: auto; }

.mp-workspace.is-sidebar-collapsed { grid-template-columns: var(--mp-sidebar-collapsed-width) minmax(0, 1fr); }
.mp-workspace.is-sidebar-collapsed .mp-sidebar { width: var(--mp-sidebar-collapsed-width); }
.mp-workspace.is-sidebar-collapsed .mp-sidebar-label,
.mp-workspace.is-sidebar-collapsed .mp-sidebar-text,
.mp-workspace.is-sidebar-collapsed .mp-brand-text,
.mp-workspace.is-sidebar-collapsed .mp-sidebar-badge { display: none; }
.mp-workspace.is-sidebar-collapsed .mp-sidebar-link { justify-content: center; padding-inline: .5rem; }

.mp-topbar,
.topbar { position: sticky; z-index: var(--mp-z-header); top: 0; min-height: var(--mp-header-height); display: flex; align-items: center; gap: var(--space-3); padding-inline: clamp(.75rem, 2vw, 1.5rem); color: var(--clr-text); background: color-mix(in srgb, var(--clr-surface) 94%, transparent); border-bottom: 1px solid var(--clr-border); backdrop-filter: blur(14px); }
.mp-topbar-start,
.mp-topbar-end { display: flex; align-items: center; gap: var(--space-2); }
.mp-topbar-end { margin-inline-start: auto; }
.mp-topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); }

.mp-subnav { display: flex; gap: var(--space-1); overflow-x: auto; padding: var(--space-1); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
.mp-subnav-link { flex: 0 0 auto; padding: .55rem .8rem; border-radius: var(--radius-md); color: var(--clr-text-light); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; }
.mp-subnav-link:hover { color: var(--clr-text); background: var(--clr-bg); text-decoration: none; }
.mp-subnav-link.active,
.mp-subnav-link[aria-current="page"] { color: var(--clr-primary-text); background: var(--clr-primary); }

.mp-account-menu { position: relative; }
.mp-account-trigger { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: .3rem .55rem; border: 1px solid var(--clr-border); border-radius: var(--radius-full); background: var(--clr-surface); color: var(--clr-text); cursor: pointer; }
.mp-account-details { min-width: 0; display: grid; text-align: start; line-height: 1.2; }
.mp-account-details small { color: var(--clr-text-light); }
.mp-account-panel { position: absolute; z-index: var(--mp-z-dropdown); top: calc(100% + .5rem); right: 0; width: min(20rem, calc(100vw - 2rem)); padding: var(--space-2); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-xl); }

.mp-bottom-nav { position: fixed; z-index: var(--mp-z-header); right: 0; bottom: 0; left: 0; min-height: var(--mp-bottom-nav-height); display: none; grid-template-columns: repeat(var(--bottom-nav-count, 4), 1fr); border-top: 1px solid var(--clr-border); background: color-mix(in srgb, var(--clr-surface) 96%, transparent); backdrop-filter: blur(14px); }
.mp-bottom-nav-link { display: grid; place-items: center; gap: .15rem; padding: .4rem; color: var(--clr-text-light); font-size: .72rem; text-decoration: none; }
.mp-bottom-nav-link.active,
.mp-bottom-nav-link[aria-current="page"] { color: var(--clr-primary-hover); }

/* ========================================================================== 
   13. BUTTONS, ACTION GROUPS AND INTERACTION STATES
   ========================================================================== */
.mp-btn,
.button,
.btn { min-height: var(--mp-control-height); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--clr-primary); color: var(--clr-primary-text); font-weight: var(--fw-semibold); line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-xs); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.mp-btn:hover,
.button:hover,
.btn:hover { background: var(--clr-primary-hover); color: var(--clr-primary-text); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.mp-btn:active,
.button:active,
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.mp-btn:disabled,
.button:disabled,
.btn:disabled { cursor: not-allowed; opacity: .58; transform: none; box-shadow: none; }

.mp-btn-sm { min-height: var(--mp-control-height-sm); padding: .3rem .6rem; font-size: var(--fs-sm); }
.mp-btn-lg { min-height: var(--mp-control-height-lg); padding: .7rem 1.1rem; font-size: var(--fs-md); }
.mp-btn-block { width: 100%; }
.mp-btn-icon { width: var(--mp-control-height); padding: 0; }
.mp-btn-icon.mp-btn-sm { width: var(--mp-control-height-sm); }
.mp-btn-icon.mp-btn-lg { width: var(--mp-control-height-lg); }
.mp-btn-pill { border-radius: var(--radius-full); }

.mp-btn-secondary { background: var(--clr-surface); color: var(--clr-text); border-color: var(--clr-border); }
.mp-btn-secondary:hover { background: var(--clr-bg); color: var(--clr-text); border-color: color-mix(in srgb, var(--clr-text) 25%, transparent); }
.mp-btn-outline { background: transparent; color: var(--clr-primary-hover); border-color: var(--clr-primary); box-shadow: none; }
.mp-btn-outline:hover { background: var(--mp-primary-soft); color: var(--clr-primary-hover); }
.mp-btn-ghost { background: transparent; color: var(--clr-text); box-shadow: none; }
.mp-btn-ghost:hover { background: color-mix(in srgb, var(--clr-text) 7%, transparent); color: var(--clr-text); }
.mp-btn-link { min-height: auto; padding: 0; border: 0; background: transparent; color: var(--clr-primary-hover); box-shadow: none; }
.mp-btn-link:hover { background: transparent; color: var(--clr-primary-hover); text-decoration: underline; transform: none; }
.mp-btn-success { background: var(--clr-success); color: #fff; }
.mp-btn-warning { background: var(--clr-warning); color: #fff; }
.mp-btn-danger { background: var(--clr-danger); color: #fff; }
.mp-btn-info { background: var(--clr-info); color: #fff; }

.mp-btn-group { display: inline-flex; vertical-align: middle; }
.mp-btn-group > .mp-btn { border-radius: 0; margin-inline-start: -1px; }
.mp-btn-group > .mp-btn:first-child { margin-inline-start: 0; border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.mp-btn-group > .mp-btn:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.mp-actions,
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mp-actions-end { justify-content: flex-end; }
.mp-actions-between { justify-content: space-between; }
.mp-actions-stretch > * { flex: 1 1 auto; }

.mp-btn-loading,
.mp-btn.is-loading { position: relative; pointer-events: none; color: transparent !important; }
.mp-btn-loading::after,
.mp-btn.is-loading::after { content: ""; position: absolute; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--clr-primary-text); animation: mp-spin .65s linear infinite; }
.mp-fab { position: fixed; z-index: var(--mp-z-sticky); right: var(--space-5); bottom: var(--space-5); width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--clr-primary); color: var(--clr-primary-text); box-shadow: var(--shadow-xl); cursor: pointer; }

/* ========================================================================== 
   14. COMPREHENSIVE FORMS AND INPUT PATTERNS
   ========================================================================== */
.mp-form { display: grid; gap: var(--space-5); }
.mp-form-section { padding: clamp(1rem, 2vw, 1.35rem); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-xs); }
.mp-form-section-header { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--clr-border-light); }
.mp-form-grid,
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); }
.mp-form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-form-span-full { grid-column: 1 / -1; }
.mp-form-group,
.form-group { min-width: 0; display: grid; gap: .4rem; }
.mp-label { color: var(--clr-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mp-label-required::after { content: " *"; color: var(--clr-danger); }
.mp-help-text,
.helptext { color: var(--clr-text-light); font-size: var(--fs-xs); }
.mp-field-error { color: var(--clr-danger); font-size: var(--fs-xs); font-weight: var(--fw-medium); }

.mp-input,
.mp-select,
.mp-textarea,
.mp-control { width: 100%; min-height: var(--mp-control-height); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: .55rem .7rem; color: var(--clr-text); background: var(--clr-surface); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); }
.mp-textarea { min-height: 7rem; resize: vertical; }
.mp-input::placeholder,
.mp-textarea::placeholder { color: color-mix(in srgb, var(--clr-text-light) 72%, transparent); }
.mp-input:hover,
.mp-select:hover,
.mp-textarea:hover { border-color: color-mix(in srgb, var(--clr-text) 30%, transparent); }
.mp-input:focus,
.mp-select:focus,
.mp-textarea:focus { border-color: var(--mp-focus); outline: none; box-shadow: var(--mp-focus-ring); }
.mp-input:disabled,
.mp-select:disabled,
.mp-textarea:disabled { cursor: not-allowed; color: var(--clr-text-light); background: var(--clr-bg); opacity: .78; }
.mp-control-sm { min-height: var(--mp-control-height-sm); padding: .35rem .55rem; font-size: var(--fs-sm); }
.mp-control-lg { min-height: var(--mp-control-height-lg); padding: .7rem .85rem; font-size: var(--fs-md); }
.mp-control-plain { border-color: transparent; background: transparent; box-shadow: none; }

.mp-input-shell { position: relative; display: flex; align-items: stretch; }
.mp-input-shell > .mp-input { flex: 1 1 auto; min-width: 0; }
.mp-input-prefix,
.mp-input-suffix { min-width: var(--mp-control-height); display: grid; place-items: center; padding-inline: .65rem; border: 1px solid var(--clr-border); background: var(--clr-bg); color: var(--clr-text-light); }
.mp-input-prefix { border-inline-end: 0; border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.mp-input-suffix { border-inline-start: 0; border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.mp-input-prefix + .mp-input { border-start-start-radius: 0; border-end-start-radius: 0; }
.mp-input-shell > .mp-input:has(+ .mp-input-suffix) { border-start-end-radius: 0; border-end-end-radius: 0; }
.mp-input-action { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); }

.mp-search { position: relative; }
.mp-search .mp-input { padding-inline-start: 2.4rem; }
.mp-search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--clr-text-light); pointer-events: none; }
.mp-search-clear { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); }

.mp-check,
.mp-radio { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; }
.mp-check input,
.mp-radio input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: .18rem; accent-color: var(--clr-primary); }
.mp-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-3); }
.mp-check-card { position: relative; display: block; cursor: pointer; }
.mp-check-card > input { position: absolute; opacity: 0; pointer-events: none; }
.mp-check-card-body { min-height: 100%; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 2px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); }
.mp-check-card:hover .mp-check-card-body { border-color: color-mix(in srgb, var(--clr-primary) 50%, var(--clr-border)); box-shadow: var(--shadow-sm); }
.mp-check-card > input:focus-visible + .mp-check-card-body { outline: 2px solid var(--mp-focus); outline-offset: 2px; }
.mp-check-card > input:checked + .mp-check-card-body { border-color: var(--clr-primary); background: var(--mp-primary-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-primary) 18%, transparent); }

.mp-segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .2rem; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-bg); }
.mp-segmented-item { position: relative; }
.mp-segmented-item input { position: absolute; opacity: 0; pointer-events: none; }
.mp-segmented-label { min-height: 2.15rem; display: grid; place-items: center; padding: .35rem .7rem; border-radius: calc(var(--radius-lg) - .2rem); color: var(--clr-text-light); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.mp-segmented-item input:checked + .mp-segmented-label { color: var(--clr-text); background: var(--clr-surface); box-shadow: var(--shadow-sm); }

.mp-switch { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; }
.mp-switch input { position: relative; width: 2.45rem; height: 1.35rem; flex: 0 0 auto; appearance: none; border: 1px solid var(--clr-border); border-radius: var(--radius-full); background: var(--clr-muted); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.mp-switch input::after { content: ""; position: absolute; top: .13rem; left: .14rem; width: .98rem; height: .98rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast); }
.mp-switch input:checked { border-color: var(--clr-primary); background: var(--clr-primary); }
.mp-switch input:checked::after { transform: translateX(1.08rem); }

.mp-range-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.mp-range-output { min-width: 3rem; padding: .3rem .5rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-bg); text-align: center; font-variant-numeric: tabular-nums; }

.mp-dropzone { position: relative; display: grid; place-items: center; min-height: 10rem; padding: var(--space-6); border: 2px dashed var(--clr-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--clr-bg) 65%, var(--clr-surface)); text-align: center; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.mp-dropzone:hover,
.mp-dropzone.is-dragover { border-color: var(--clr-primary); background: var(--mp-primary-soft); }
.mp-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mp-file-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.mp-file-item { display: flex; align-items: center; gap: var(--space-3); padding: .65rem .75rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); }
.mp-file-item-meta { min-width: 0; flex: 1 1 auto; }
.mp-file-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); }

.mp-otp { display: grid; grid-template-columns: repeat(var(--otp-length, 6), minmax(2.4rem, 3.2rem)); gap: var(--space-2); justify-content: center; }
.mp-otp input { min-width: 0; height: 3.25rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); color: var(--clr-text); text-align: center; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.mp-password-meter { height: .35rem; overflow: hidden; border-radius: var(--radius-full); background: var(--clr-border-light); }
.mp-password-meter-bar { width: var(--password-strength, 0%); height: 100%; border-radius: inherit; background: var(--meter-color, var(--clr-danger)); transition: width var(--transition-normal), background-color var(--transition-normal); }
.mp-char-count { justify-self: end; color: var(--clr-text-light); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.mp-form-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.mp-form-actions-sticky { position: sticky; z-index: var(--mp-z-sticky); bottom: var(--space-3); padding: var(--space-3); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--clr-surface) 95%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); }
.mp-field.is-valid .mp-input,
.mp-field.is-valid .mp-select,
.mp-field.is-valid .mp-textarea,
.is-valid { border-color: var(--clr-success) !important; }
.mp-field.is-invalid .mp-input,
.mp-field.is-invalid .mp-select,
.mp-field.is-invalid .mp-textarea,
.is-invalid { border-color: var(--clr-danger) !important; }

/* ========================================================================== 
   15. CARDS, PANELS, METRICS, LISTS AND DATA DISPLAY
   ========================================================================== */
.mp-card,
.card,
.panel { overflow: hidden; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-sm); }
.mp-card-body { padding: var(--space-4); }
.mp-card-header,
.mp-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--clr-bg) 70%, var(--clr-surface)); }
.mp-card-header { border-bottom: 1px solid var(--clr-border); }
.mp-card-footer { border-top: 1px solid var(--clr-border); }
.mp-card-title { margin: 0; font-size: var(--fs-md); }
.mp-card-subtitle { margin-top: .2rem; color: var(--clr-text-light); font-size: var(--fs-sm); }
.mp-card-interactive { transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
.mp-card-interactive:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--clr-primary) 40%, var(--clr-border)); box-shadow: var(--shadow-md); }
.mp-card-accent { border-top: 4px solid var(--card-accent, var(--clr-primary)); }
.mp-card-horizontal { display: grid; grid-template-columns: var(--card-media-width, 10rem) minmax(0, 1fr); }
.mp-card-media { min-height: 100%; overflow: hidden; background: var(--clr-bg); }
.mp-card-media img { width: 100%; height: 100%; object-fit: cover; }
.mp-card-compact .mp-card-body { padding: var(--space-3); }

.mp-panel { padding: var(--space-4); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-xs); }
.mp-panel-soft { background: color-mix(in srgb, var(--clr-bg) 70%, var(--clr-surface)); }
.mp-panel-accent { border-inline-start: 4px solid var(--panel-accent, var(--clr-primary)); }
.mp-panel-success { border-color: color-mix(in srgb, var(--clr-success) 40%, var(--clr-border)); background: var(--mp-success-soft); }
.mp-panel-warning { border-color: color-mix(in srgb, var(--clr-warning) 40%, var(--clr-border)); background: var(--mp-warning-soft); }
.mp-panel-danger { border-color: color-mix(in srgb, var(--clr-danger) 40%, var(--clr-border)); background: var(--mp-danger-soft); }
.mp-panel-info { border-color: color-mix(in srgb, var(--clr-info) 40%, var(--clr-border)); background: var(--mp-info-soft); }

.mp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-3); }
.mp-stat { display: grid; gap: .35rem; padding: var(--space-4); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-xs); }
.mp-stat-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.mp-stat-label { color: var(--clr-text-light); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mp-stat-value { font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.mp-stat-change { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.mp-stat-change-up { color: var(--clr-success); }
.mp-stat-change-down { color: var(--clr-danger); }
.mp-stat-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--mp-primary-soft); color: var(--clr-primary-hover); }
.mp-sparkline { width: 100%; height: 2.5rem; }

.mp-data-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mp-data-item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: .75rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); }
.mp-media-object { display: flex; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.mp-media-object-media { width: var(--media-size, 3rem); height: var(--media-size, 3rem); flex: 0 0 auto; overflow: hidden; border-radius: var(--radius-md); background: var(--clr-bg); }
.mp-media-object-media img { width: 100%; height: 100%; object-fit: cover; }
.mp-media-object-body { min-width: 0; flex: 1 1 auto; }
.mp-media-object-title { overflow-wrap: anywhere; font-weight: var(--fw-semibold); }
.mp-media-object-meta { color: var(--clr-text-light); font-size: var(--fs-sm); }

.mp-definition-list { display: grid; grid-template-columns: minmax(8rem, .45fr) minmax(0, 1fr); gap: .55rem var(--space-4); margin: 0; }
.mp-definition-list dt { color: var(--clr-text-light); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mp-definition-list dd { margin: 0; overflow-wrap: anywhere; }
.mp-definition-list-divided > * { padding-block: .55rem; border-bottom: 1px solid var(--clr-border-light); }

.mp-chip-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.mp-chip { min-height: 1.85rem; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--clr-border); border-radius: var(--radius-full); background: var(--clr-surface); color: var(--clr-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.mp-chip-removable button { width: 1.15rem; height: 1.15rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.mp-tag { display: inline-flex; align-items: center; padding: .18rem .48rem; border-radius: var(--radius-sm); background: var(--mp-primary-soft); color: var(--clr-primary-hover); font-size: .72rem; font-weight: var(--fw-bold); }
.mp-status { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; border-radius: var(--radius-full); background: var(--clr-bg); color: var(--clr-text-light); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.mp-status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.mp-status-success { color: var(--clr-success); background: var(--mp-success-soft); }
.mp-status-warning { color: var(--clr-warning); background: var(--mp-warning-soft); }
.mp-status-danger { color: var(--clr-danger); background: var(--mp-danger-soft); }
.mp-status-info { color: var(--clr-info); background: var(--mp-info-soft); }

.mp-reference-panel { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px dashed color-mix(in srgb, var(--clr-primary) 48%, var(--clr-border)); border-radius: var(--radius-lg); background: var(--mp-primary-soft); }
.mp-reference-code { overflow-wrap: anywhere; font-family: var(--ff-mono); font-size: clamp(1rem, 2.5vw, 1.35rem); font-weight: var(--fw-bold); letter-spacing: .04em; }
.mp-result-state { width: min(100%, 42rem); margin-inline: auto; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); background: var(--clr-surface); text-align: center; box-shadow: var(--shadow-md); }
.mp-result-state-icon { width: 4rem; height: 4rem; display: grid; place-items: center; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--mp-primary-soft); color: var(--clr-primary-hover); font-size: var(--fs-xl); }
.mp-empty-state { display: grid; place-items: center; min-height: 15rem; padding: var(--space-8); border: 1px dashed var(--clr-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--clr-bg) 65%, var(--clr-surface)); text-align: center; }
.mp-empty-state-content { max-width: 34rem; }

/* ========================================================================== 
   16. TABLES, TOOLBARS, FILTERS AND PAGINATION
   ========================================================================== */
.mp-data-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.mp-data-toolbar-primary { flex: 1 1 18rem; }
.mp-data-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.mp-filter-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
.mp-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.mp-table-wrap,
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
.mp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.mp-table th,
.mp-table td { padding: .72rem .8rem; border-bottom: 1px solid var(--clr-border-light); text-align: start; vertical-align: middle; }
.mp-table th { color: var(--clr-text-light); background: color-mix(in srgb, var(--clr-bg) 70%, var(--clr-surface)); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; }
.mp-table tbody tr:last-child td { border-bottom: 0; }
.mp-table-hover tbody tr:hover { background: color-mix(in srgb, var(--clr-primary) 5%, var(--clr-surface)); }
.mp-table-striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--clr-bg) 45%, var(--clr-surface)); }
.mp-table-compact th,
.mp-table-compact td { padding: .45rem .55rem; }
.mp-table-bordered th,
.mp-table-bordered td { border-inline-end: 1px solid var(--clr-border-light); }
.mp-table-sticky thead th { position: sticky; z-index: 2; top: 0; }
.mp-table-sticky-column th:first-child,
.mp-table-sticky-column td:first-child { position: sticky; z-index: 1; left: 0; background: var(--clr-surface); box-shadow: 1px 0 0 var(--clr-border); }
.mp-table-sort { display: inline-flex; align-items: center; gap: .35rem; color: inherit; background: transparent; border: 0; font: inherit; cursor: pointer; }
.mp-table-sort::after { content: "↕"; opacity: .45; }
.mp-table-sort[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.mp-table-sort[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
.mp-table-row-selected { background: var(--mp-primary-soft) !important; }
.mp-table-actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }

.mp-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.mp-pagination-list { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.mp-page-link { min-width: 2.25rem; min-height: 2.25rem; display: grid; place-items: center; padding: .3rem .55rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); color: var(--clr-text); text-decoration: none; }
.mp-page-link:hover { background: var(--clr-bg); text-decoration: none; }
.mp-page-link.active,
.mp-page-link[aria-current="page"] { border-color: var(--clr-primary); background: var(--clr-primary); color: var(--clr-primary-text); }
.mp-page-link[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ========================================================================== 
   17. GENERIC SELECTION, PROCESS, STEPPER AND WIZARD COMPONENTS
   ========================================================================== */
.mp-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--choice-min, 14rem)), 1fr)); gap: var(--space-3); }
.mp-choice-card { position: relative; display: block; min-width: 0; cursor: pointer; }
.mp-choice-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mp-choice-visual { min-height: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 2px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.mp-choice-card:hover .mp-choice-visual { border-color: color-mix(in srgb, var(--clr-primary) 52%, var(--clr-border)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.mp-choice-card > input:focus-visible + .mp-choice-visual { outline: 2px solid var(--mp-focus); outline-offset: 2px; }
.mp-choice-card > input:checked + .mp-choice-visual { border-color: var(--clr-success); background: var(--mp-success-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-success) 16%, transparent); }
.mp-choice-media { width: var(--choice-media-size, 4.5rem); height: var(--choice-media-size, 4.5rem); flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-md); background: var(--clr-bg); }
.mp-choice-media img { width: 100%; height: 100%; object-fit: cover; }
.mp-choice-content { min-width: 0; flex: 1 1 auto; display: grid; gap: .3rem; }
.mp-choice-title { overflow-wrap: anywhere; font-weight: var(--fw-semibold); }
.mp-choice-description { color: var(--clr-text-light); font-size: var(--fs-sm); }
.mp-choice-mark { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; margin-inline-start: auto; border: 2px solid var(--clr-border); border-radius: 50%; }
.mp-choice-card > input:checked + .mp-choice-visual .mp-choice-mark { border: .34rem solid var(--clr-success); }
.mp-choice-card-abstain .mp-choice-visual,
.mp-choice-card-neutral .mp-choice-visual { background: color-mix(in srgb, var(--clr-bg) 72%, var(--clr-surface)); }

.mp-process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3); }
.mp-process-step { position: relative; padding: var(--space-4); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
.mp-process-number { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; margin-bottom: var(--space-3); border-radius: 50%; background: var(--clr-primary); color: var(--clr-primary-text); font-weight: var(--fw-bold); }
.mp-process-step.is-complete .mp-process-number { background: var(--clr-success); color: #fff; }
.mp-process-step.is-current { border-color: var(--clr-primary); box-shadow: 0 0 0 2px var(--mp-primary-soft); }

.mp-stepper { display: flex; align-items: flex-start; overflow-x: auto; }
.mp-step { position: relative; min-width: 8rem; flex: 1 1 0; display: grid; justify-items: center; gap: .45rem; color: var(--clr-text-light); text-align: center; }
.mp-step::before { content: ""; position: absolute; z-index: 0; top: 1rem; right: 50%; left: -50%; height: 2px; background: var(--clr-border); }
.mp-step:first-child::before { display: none; }
.mp-step-marker { position: relative; z-index: 1; width: 2rem; height: 2rem; display: grid; place-items: center; border: 2px solid var(--clr-border); border-radius: 50%; background: var(--clr-surface); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.mp-step.is-active,
.mp-step.is-complete { color: var(--clr-text); }
.mp-step.is-active .mp-step-marker { border-color: var(--clr-primary); color: var(--clr-primary-hover); box-shadow: 0 0 0 3px var(--mp-primary-soft); }
.mp-step.is-complete .mp-step-marker { border-color: var(--clr-success); background: var(--clr-success); color: #fff; }
.mp-step.is-complete::before { background: var(--clr-success); }

.mp-wizard { display: grid; gap: var(--space-5); }
.mp-wizard-step[hidden] { display: none !important; }
.mp-wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mp-progress-summary { display: grid; gap: .4rem; }
.mp-progress-track { height: .45rem; overflow: hidden; border-radius: var(--radius-full); background: var(--clr-border-light); }
.mp-progress-fill { width: var(--progress, 0%); height: 100%; border-radius: inherit; background: var(--clr-primary); transition: width var(--transition-normal); }
.mp-review-list { display: grid; gap: var(--space-3); }
.mp-review-item { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(8rem, auto); gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
.mp-review-number { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--mp-primary-soft); color: var(--clr-primary-hover); font-weight: var(--fw-bold); }
.mp-review-value { text-align: end; overflow-wrap: anywhere; font-weight: var(--fw-semibold); }

.mp-timeline { position: relative; display: grid; gap: var(--space-4); padding-inline-start: 1.8rem; }
.mp-timeline::before { content: ""; position: absolute; top: .35rem; bottom: .35rem; left: .55rem; width: 2px; background: var(--clr-border); }
.mp-timeline-item { position: relative; }
.mp-timeline-marker { position: absolute; top: .28rem; left: -1.55rem; width: .8rem; height: .8rem; border: 2px solid var(--clr-surface); border-radius: 50%; background: var(--clr-primary); box-shadow: 0 0 0 2px var(--clr-border); }
.mp-timeline-time { color: var(--clr-text-light); font-size: var(--fs-xs); }
.mp-timeline-content { margin-top: .2rem; }

/* ========================================================================== 
   18. FEEDBACK, ALERTS, TOASTS, LOADING AND SYSTEM STATES
   ========================================================================== */
.mp-alert,
.message { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: .8rem 2.5rem .8rem .9rem; border: 1px solid var(--clr-border); border-inline-start-width: 4px; border-radius: var(--radius-md); background: var(--clr-surface); color: var(--clr-text); box-shadow: var(--shadow-xs); }
.mp-alert-success { border-color: color-mix(in srgb, var(--clr-success) 45%, var(--clr-border)); border-inline-start-color: var(--clr-success); background: var(--mp-success-soft); }
.mp-alert-warning { border-color: color-mix(in srgb, var(--clr-warning) 45%, var(--clr-border)); border-inline-start-color: var(--clr-warning); background: var(--mp-warning-soft); }
.mp-alert-danger { border-color: color-mix(in srgb, var(--clr-danger) 45%, var(--clr-border)); border-inline-start-color: var(--clr-danger); background: var(--mp-danger-soft); }
.mp-alert-info { border-color: color-mix(in srgb, var(--clr-info) 45%, var(--clr-border)); border-inline-start-color: var(--clr-info); background: var(--mp-info-soft); }
.mp-alert-close,
.message-close { position: absolute; top: .45rem; right: .5rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.mp-message-stack,
.messages { position: fixed; z-index: var(--mp-z-toast); top: calc(var(--mp-header-height) + 1rem); right: 1rem; width: min(26rem, calc(100vw - 2rem)); display: grid; gap: var(--space-2); }
.mp-toast-container { z-index: var(--mp-z-toast) !important; max-height: calc(100vh - var(--mp-header-height) - 2rem); overflow-y: auto; pointer-events: none; }
.mp-toast-container > * { pointer-events: auto; }
.mp-toast { width: min(24rem, calc(100vw - 2rem)); }

.mp-loading-overlay { position: fixed; z-index: var(--mp-z-modal); inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--clr-bg) 72%, transparent); backdrop-filter: blur(5px); }
.mp-loading-panel { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); background: var(--clr-surface); box-shadow: var(--shadow-xl); }
.mp-inline-loader { display: inline-flex; align-items: center; gap: .5rem; color: var(--clr-text-light); }
.mp-offline-banner { position: sticky; z-index: calc(var(--mp-z-header) + 1); top: 0; padding: .45rem .8rem; background: var(--clr-warning); color: #fff; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mp-cookie-banner { position: fixed; z-index: var(--mp-z-modal); right: 1rem; bottom: 1rem; left: 1rem; max-width: 72rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-xl); }

/* ========================================================================== 
   19. OVERLAYS, MENUS, COMMAND PALETTE, LIGHTBOX AND DRAWERS
   ========================================================================== */
.mp-modal { position: fixed; z-index: var(--mp-z-modal); inset: 0; display: none; align-items: center; justify-content: center; padding: var(--space-4); }
.mp-modal.active,
.mp-modal[open] { display: flex; }
.mp-modal-backdrop { position: absolute; inset: 0; background: var(--mp-overlay); backdrop-filter: blur(3px); }
.mp-modal-dialog { position: relative; z-index: 1; width: min(100%, var(--modal-width, 42rem)); max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid var(--clr-border); border-radius: var(--radius-xl); background: var(--clr-surface); color: var(--clr-text); box-shadow: var(--shadow-xl); }
.mp-modal-dialog-sm { --modal-width: 28rem; }
.mp-modal-dialog-lg { --modal-width: 64rem; }
.mp-modal-dialog-full { width: calc(100vw - 2rem); height: calc(100vh - 2rem); }
.mp-modal-header,
.mp-modal-body,
.mp-modal-footer { padding: var(--space-4); }
.mp-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--clr-border); }
.mp-modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); border-top: 1px solid var(--clr-border); }
.mp-modal-close { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); color: var(--clr-text-light); cursor: pointer; }

.mp-drawer { position: fixed; z-index: var(--mp-z-modal); top: 0; bottom: 0; width: min(var(--drawer-width, 28rem), 92vw); overflow-y: auto; background: var(--clr-surface); color: var(--clr-text); box-shadow: var(--shadow-xl); transition: transform var(--transition-normal); }
.mp-drawer-left { left: 0; transform: translateX(-105%); }
.mp-drawer-right { right: 0; transform: translateX(105%); }
.mp-drawer.active { transform: translateX(0); }
.mp-drawer-header,
.mp-drawer-body,
.mp-drawer-footer { padding: var(--space-4); }
.mp-drawer-header { position: sticky; z-index: 1; top: 0; display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--clr-border); background: var(--clr-surface); }
.mp-drawer-footer { position: sticky; bottom: 0; border-top: 1px solid var(--clr-border); background: var(--clr-surface); }
.mp-overlay-backdrop { position: fixed; z-index: calc(var(--mp-z-modal) - 1); inset: 0; background: var(--mp-overlay); }

.mp-popover { position: absolute; z-index: var(--mp-z-dropdown); display: none; width: min(22rem, calc(100vw - 2rem)); padding: var(--space-3); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-lg); }
.mp-popover.active { display: block; }
.mp-tooltip-js,
.mp-tooltip { position: fixed; z-index: var(--mp-z-tooltip); max-width: 18rem; padding: .35rem .5rem; border-radius: var(--radius-sm); background: var(--mp-navy-dark); color: #fff; font-size: var(--fs-xs); box-shadow: var(--shadow-md); pointer-events: none; }

.mp-menu { min-width: 12rem; padding: .35rem; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-lg); }
.mp-menu-item { width: 100%; min-height: 2.2rem; display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--clr-text); font-size: var(--fs-sm); text-align: start; text-decoration: none; cursor: pointer; }
.mp-menu-item:hover,
.mp-menu-item:focus { background: var(--clr-bg); text-decoration: none; }
.mp-menu-item-danger { color: var(--clr-danger); }
.mp-menu-divider { height: 1px; margin: .35rem 0; background: var(--clr-border); }
.mp-menu-label { padding: .35rem .6rem; color: var(--clr-text-light); font-size: .7rem; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }

.mp-command-palette { position: fixed; z-index: var(--mp-z-modal); top: 10vh; left: 50%; width: min(42rem, calc(100vw - 2rem)); max-height: 76vh; display: none; transform: translateX(-50%); overflow: hidden; border: 1px solid var(--clr-border); border-radius: var(--radius-xl); background: var(--clr-surface); box-shadow: var(--shadow-xl); }
.mp-command-palette.active { display: grid; }
.mp-command-input { padding: var(--space-3); border-bottom: 1px solid var(--clr-border); }
.mp-command-results { min-height: 0; overflow-y: auto; padding: .35rem; }
.mp-command-item { display: flex; align-items: center; gap: var(--space-3); padding: .65rem .75rem; border-radius: var(--radius-md); color: var(--clr-text); text-decoration: none; }
.mp-command-item:hover,
.mp-command-item.active { background: var(--clr-bg); text-decoration: none; }
.mp-command-shortcut { margin-inline-start: auto; color: var(--clr-text-light); font-size: var(--fs-xs); }

.mp-lightbox { position: fixed; z-index: var(--mp-z-modal); inset: 0; display: none; place-items: center; padding: var(--space-4); background: rgba(0,0,0,.9); }
.mp-lightbox.mp-active,
.mp-lightbox.active { display: grid; }
.mp-lightbox-img { max-width: min(94vw, 90rem); max-height: 88vh; object-fit: contain; }
.mp-lightbox-close,
.mp-lightbox-prev,
.mp-lightbox-next { position: absolute; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.13); color: #fff; cursor: pointer; }
.mp-lightbox-close { top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; }
.mp-lightbox-prev,
.mp-lightbox-next { top: 50%; width: 3rem; height: 3rem; transform: translateY(-50%); }
.mp-lightbox-prev { left: 1rem; }
.mp-lightbox-next { right: 1rem; }

/* ========================================================================== 
   20. DOCUMENTATION, PROSE, CODE, SEARCH RESULTS AND KNOWLEDGE LAYOUTS
   ========================================================================== */
.mp-doc-layout { display: grid; grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.mp-doc-layout-wide { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) minmax(11rem, 15rem); }
.mp-doc-toc { position: sticky; top: calc(var(--mp-header-height) + var(--space-4)); max-height: calc(100vh - var(--mp-header-height) - 2rem); overflow-y: auto; padding: var(--space-3); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
.mp-doc-toc nav { display: grid; gap: .15rem; }
.mp-doc-toc a { padding: .35rem .5rem; border-radius: var(--radius-sm); color: var(--clr-text-light); font-size: var(--fs-sm); text-decoration: none; }
.mp-doc-toc a:hover,
.mp-doc-toc a.active { color: var(--clr-text); background: var(--clr-bg); text-decoration: none; }
.mp-doc-toc-level-2 { padding-inline-start: 1rem !important; }
.mp-doc-toc-level-3 { padding-inline-start: 1.75rem !important; font-size: var(--fs-xs) !important; }
.mp-doc-article { min-width: 0; padding: clamp(1rem, 2.5vw, 2rem); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-xs); }

.mp-prose { color: var(--clr-text); line-height: var(--lh-relaxed); }
.mp-prose > * + * { margin-top: 1em; }
.mp-prose h1,
.mp-prose h2,
.mp-prose h3,
.mp-prose h4 { scroll-margin-top: calc(var(--mp-header-height) + 1rem); margin-bottom: .45em; line-height: var(--lh-tight); }
.mp-prose h2 { margin-top: 1.6em; }
.mp-prose h3 { margin-top: 1.35em; }
.mp-prose ul,
.mp-prose ol { padding-inline-start: 1.35rem; }
.mp-prose blockquote { margin-inline: 0; padding: .8rem 1rem; border-inline-start: 4px solid var(--clr-primary); background: var(--mp-primary-soft); color: var(--clr-text-light); }
.mp-prose img { border-radius: var(--radius-lg); }
.mp-prose figure { margin: 1.5rem 0; }
.mp-prose figcaption { margin-top: .5rem; color: var(--clr-text-light); font-size: var(--fs-sm); text-align: center; }
.mp-prose table { width: 100%; }
.mp-prose a { text-decoration: underline; text-underline-offset: .18em; }

.mp-code-block { position: relative; overflow: auto; padding: var(--space-4); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); background: #0b1420; color: #eaf1f7; font-family: var(--ff-mono); font-size: .875rem; line-height: 1.6; tab-size: 2; }
.mp-code-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3); padding: .55rem .75rem; border-bottom: 1px solid rgba(255,255,255,.08); background: #101d2c; color: #afbdca; font-family: var(--ff-body); font-size: var(--fs-xs); }
.mp-terminal { overflow: hidden; border: 1px solid #1d3145; border-radius: var(--radius-lg); background: #06101a; color: #d9f4e8; box-shadow: var(--shadow-lg); }
.mp-terminal-header { display: flex; align-items: center; gap: .4rem; padding: .6rem .75rem; background: #102031; }
.mp-terminal-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--dot-color, #e36a6a); }
.mp-terminal-body { overflow: auto; padding: var(--space-4); font-family: var(--ff-mono); font-size: .85rem; line-height: 1.55; }

.mp-search-panel { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
.mp-search-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-3); }
.mp-search-result { display: flex; min-height: 9rem; flex-direction: column; padding: var(--space-4); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
.mp-search-result-actions { margin-top: auto; padding-top: var(--space-3); }

/* ========================================================================== 
   21. WORK MANAGEMENT: KANBAN, TREE, CALENDAR, ACTIVITY, CHAT AND FILES
   ========================================================================== */
.mp-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 22rem); gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x proximity; }
.mp-kanban-column { min-height: 20rem; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--clr-bg) 70%, var(--clr-surface)); scroll-snap-align: start; }
.mp-kanban-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mp-kanban-cards { display: grid; gap: var(--space-3); }
.mp-kanban-card { padding: var(--space-3); border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); box-shadow: var(--shadow-xs); cursor: grab; }
.mp-kanban-card:active { cursor: grabbing; }

.mp-tree,
.mp-tree ul { margin: 0; padding: 0; list-style: none; }
.mp-tree ul { padding-inline-start: 1.25rem; }
.mp-tree-node { position: relative; }
.mp-tree-row { min-height: 2.1rem; display: flex; align-items: center; gap: .45rem; padding: .25rem .4rem; border-radius: var(--radius-sm); }
.mp-tree-row:hover { background: var(--clr-bg); }
.mp-tree-toggle { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--clr-text-light); cursor: pointer; }
.mp-tree-node[aria-expanded="false"] > ul { display: none; }

.mp-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--clr-surface); }
.mp-calendar-heading { padding: .55rem; background: var(--clr-bg); color: var(--clr-text-light); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: center; text-transform: uppercase; }
.mp-calendar-day { min-height: 7rem; padding: .45rem; border-top: 1px solid var(--clr-border-light); border-inline-end: 1px solid var(--clr-border-light); }
.mp-calendar-day:nth-child(7n) { border-inline-end: 0; }
.mp-calendar-day.is-muted { color: var(--clr-muted); background: color-mix(in srgb, var(--clr-bg) 50%, var(--clr-surface)); }
.mp-calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--clr-primary); }
.mp-calendar-date { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.mp-calendar-event { display: block; margin-top: .25rem; padding: .2rem .35rem; border-radius: var(--radius-sm); background: var(--mp-primary-soft); color: var(--clr-primary-hover); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mp-activity-feed { display: grid; gap: var(--space-4); }
.mp-activity-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); }
.mp-activity-marker { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--mp-primary-soft); color: var(--clr-primary-hover); }
.mp-activity-content { padding-bottom: var(--space-4); border-bottom: 1px solid var(--clr-border-light); }
.mp-activity-time { color: var(--clr-text-light); font-size: var(--fs-xs); }

.mp-chat { min-height: 28rem; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--clr-surface); }
.mp-chat-header { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--clr-border); }
.mp-chat-messages { overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.mp-chat-message { align-self: flex-start; max-width: min(78%, 38rem); padding: .65rem .8rem; border-radius: var(--radius-lg); background: var(--clr-bg); }
.mp-chat-message-self { align-self: flex-end; background: var(--mp-primary-soft); }
.mp-chat-meta { margin-top: .25rem; color: var(--clr-text-light); font-size: .7rem; }
.mp-chat-composer { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--clr-border); }

.mp-file-browser { border: 1px solid var(--clr-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--clr-surface); }
.mp-file-browser-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--clr-border); }
.mp-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); padding: var(--space-4); }
.mp-file-card { display: grid; justify-items: center; gap: .5rem; padding: var(--space-3); border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); text-align: center; }
.mp-file-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--mp-primary-soft); color: var(--clr-primary-hover); }
.mp-file-name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* ========================================================================== 
   22. MEDIA, GALLERY, CAROUSEL, COMPARISON AND PRICING COMPONENTS
   ========================================================================== */
.mp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gallery-min, 12rem)), 1fr)); gap: var(--space-3); }
.mp-gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--clr-bg); cursor: zoom-in; }
.mp-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); }
.mp-gallery-item:hover img { transform: scale(1.035); }
.mp-gallery-caption { position: absolute; right: 0; bottom: 0; left: 0; padding: .7rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); font-size: var(--fs-sm); }

.mp-carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.mp-carousel-track { display: flex; transition: transform var(--transition-normal); }
.mp-carousel-slide { min-width: 100%; display: none; }
.mp-carousel-slide.active { display: block; }
.mp-carousel-prev,
.mp-carousel-next { position: absolute; z-index: 2; top: 50%; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 50%; background: rgba(0,0,0,.48); color: #fff; cursor: pointer; }
.mp-carousel-prev { left: .75rem; }
.mp-carousel-next { right: .75rem; }
.mp-carousel-indicators { position: absolute; z-index: 2; right: 0; bottom: .75rem; left: 0; display: flex; justify-content: center; gap: .4rem; }
.mp-carousel-indicator { width: .6rem; height: .6rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; }
.mp-carousel-indicator.active { background: #fff; transform: scale(1.2); }

.mp-video-embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); background: #000; }
.mp-video-embed iframe,
.mp-video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.mp-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4); align-items: stretch; }
.mp-pricing-card { position: relative; display: flex; flex-direction: column; padding: var(--space-5); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); background: var(--clr-surface); box-shadow: var(--shadow-sm); }
.mp-pricing-card-featured { border-color: var(--clr-primary); box-shadow: 0 0 0 2px var(--mp-primary-soft), var(--shadow-lg); }
.mp-pricing-price { margin-block: var(--space-3); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; }
.mp-pricing-features { display: grid; gap: .6rem; margin: var(--space-4) 0; padding: 0; list-style: none; }
.mp-pricing-actions { margin-top: auto; }
.mp-comparison-wrap { overflow-x: auto; }
.mp-comparison-table { min-width: 42rem; }
.mp-comparison-table th:first-child,
.mp-comparison-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--clr-surface); }

.mp-rating { display: inline-flex; gap: .15rem; color: var(--clr-warning); }
.mp-rating-control { display: inline-flex; flex-direction: row-reverse; }
.mp-rating-control input { position: absolute; opacity: 0; }
.mp-rating-control label { color: var(--clr-muted); font-size: var(--fs-lg); cursor: pointer; }
.mp-rating-control label:hover,
.mp-rating-control label:hover ~ label,
.mp-rating-control input:checked ~ label { color: var(--clr-warning); }

/* ========================================================================== 
   23. EXTENDED UTILITY LIBRARY
   ========================================================================== */
.mp-visible { visibility: visible; }
.mp-invisible { visibility: hidden; }
.mp-collapse { visibility: collapse; }
.mp-pointer-events-none { pointer-events: none; }
.mp-pointer-events-auto { pointer-events: auto; }
.mp-select-none { user-select: none; }
.mp-select-text { user-select: text; }
.mp-select-all { user-select: all; }
.mp-resize-none { resize: none; }
.mp-resize { resize: both; }
.mp-resize-x { resize: horizontal; }
.mp-resize-y { resize: vertical; }
.mp-isolate { isolation: isolate; }
.mp-break-normal { overflow-wrap: normal; word-break: normal; }
.mp-break-words { overflow-wrap: break-word; }
.mp-break-all { word-break: break-all; }
.mp-hyphens-auto { hyphens: auto; }
.mp-italic { font-style: italic; }
.mp-not-italic { font-style: normal; }
.mp-tracking-tight { letter-spacing: -.025em; }
.mp-tracking-normal { letter-spacing: 0; }
.mp-tracking-wide { letter-spacing: .05em; }
.mp-tabular-nums { font-variant-numeric: tabular-nums; }
.mp-font-mono { font-family: var(--ff-mono); }
.mp-bg-transparent { background: transparent; }
.mp-text-current { color: currentColor; }
.mp-border-transparent { border-color: transparent; }
.mp-border-0 { border-width: 0; }
.mp-border-2 { border-width: 2px; }
.mp-border-4 { border-width: 4px; }
.mp-border-dashed { border-style: dashed; }
.mp-border-dotted { border-style: dotted; }
.mp-ring { box-shadow: var(--mp-focus-ring); }
.mp-ring-primary { box-shadow: 0 0 0 3px var(--mp-primary-soft); }
.mp-outline-none { outline: none; }
.mp-flex-1 { flex: 1 1 0%; }
.mp-flex-auto { flex: 1 1 auto; }
.mp-flex-initial { flex: 0 1 auto; }
.mp-flex-none { flex: none; }
.mp-grow { flex-grow: 1; }
.mp-grow-0 { flex-grow: 0; }
.mp-shrink { flex-shrink: 1; }
.mp-shrink-0 { flex-shrink: 0; }
.mp-basis-0 { flex-basis: 0; }
.mp-basis-auto { flex-basis: auto; }
.mp-order-first { order: -9999; }
.mp-order-last { order: 9999; }
.mp-order-none { order: 0; }
.mp-place-items-center { place-items: center; }
.mp-place-content-center { place-content: center; }
.mp-self-auto { align-self: auto; }
.mp-self-start { align-self: flex-start; }
.mp-self-center { align-self: center; }
.mp-self-end { align-self: flex-end; }
.mp-self-stretch { align-self: stretch; }
.mp-justify-self-start { justify-self: start; }
.mp-justify-self-center { justify-self: center; }
.mp-justify-self-end { justify-self: end; }
.mp-justify-self-stretch { justify-self: stretch; }
.mp-min-w-0 { min-width: 0; }
.mp-min-w-full { min-width: 100%; }
.mp-max-w-none { max-width: none; }
.mp-max-w-xs { max-width: var(--mp-content-xs); }
.mp-max-w-sm { max-width: var(--mp-content-sm); }
.mp-max-w-md { max-width: var(--mp-content-md); }
.mp-max-w-lg { max-width: var(--mp-content-lg); }
.mp-max-w-xl { max-width: var(--mp-content-xl); }
.mp-min-h-0 { min-height: 0; }
.mp-min-h-screen { min-height: 100vh; }
.mp-max-h-screen { max-height: 100vh; }
.mp-h-fit { height: fit-content; }
.mp-w-fit { width: fit-content; }
.mp-w-screen { width: 100vw; }
.mp-inset-auto { inset: auto; }
.mp-top-full { top: 100%; }
.mp-left-full { left: 100%; }
.mp-right-full { right: 100%; }
.mp-bottom-full { bottom: 100%; }
.mp-translate-x-0 { transform: translateX(0); }
.mp-translate-y-0 { transform: translateY(0); }
.mp-scale-95 { transform: scale(.95); }
.mp-scale-100 { transform: scale(1); }
.mp-rotate-90 { transform: rotate(90deg); }
.mp-rotate-180 { transform: rotate(180deg); }
.mp-origin-center { transform-origin: center; }
.mp-snap-x { scroll-snap-type: x mandatory; }
.mp-snap-y { scroll-snap-type: y mandatory; }
.mp-snap-start { scroll-snap-align: start; }
.mp-scroll-smooth { scroll-behavior: smooth; }
.mp-touch-pan-x { touch-action: pan-x; }
.mp-touch-pan-y { touch-action: pan-y; }
.mp-touch-none { touch-action: none; }
.mp-no-print { }
.mp-only-print { display: none !important; }
.mp-back-to-top { position: fixed; z-index: var(--mp-z-sticky); right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; display: none; place-items: center; border: 0; border-radius: 50%; background: var(--clr-primary); color: var(--clr-primary-text); box-shadow: var(--shadow-lg); cursor: pointer; }
.mp-back-to-top.active { display: grid; }

/* ========================================================================== 
   24. RESPONSIVE BEHAVIOUR
   ========================================================================== */
@media (max-width: 1100px) {
  .mp-doc-layout-wide { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); }
  .mp-doc-layout-wide > :last-child { display: none; }
  .mp-calendar-day { min-height: 5.5rem; }
}

@media (max-width: 900px) {
  .mp-workspace { grid-template-columns: 1fr; }
  .mp-sidebar { position: fixed; z-index: var(--mp-z-modal); left: 0; transform: translateX(-105%); box-shadow: var(--shadow-xl); }
  .mp-sidebar.active,
  .mp-sidebar.is-open { transform: translateX(0); }
  .mp-nav-toggle { display: grid; }
  .mp-nav-links { position: absolute; top: 100%; right: 1rem; left: 1rem; display: none; flex-direction: column; align-items: stretch; padding: var(--space-2); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-lg); }
  .mp-nav-links.active,
  .mp-nav-links.is-open { display: flex; }
  .mp-nav-link { color: var(--clr-text-light); }
  .mp-nav-link:hover,
  .mp-nav-link.active { color: var(--clr-text); background: var(--clr-bg); }
  .mp-split-layout,
  .mp-split-layout-reverse,
  .mp-sidebar-layout,
  .mp-sidebar-layout-right,
  .mp-doc-layout,
  .mp-doc-layout-wide { grid-template-columns: 1fr; }
  .mp-sidebar-layout > .mp-sticky-region,
  .mp-split-layout > .mp-sticky-region,
  .mp-doc-toc { position: static; max-height: none; }
  .mp-card-horizontal { grid-template-columns: 1fr; }
  .mp-card-media { min-height: 12rem; }
}

@media (max-width: 700px) {
  .mp-page-header,
  .page-heading,
  .mp-section-header { align-items: stretch; flex-direction: column; }
  .mp-page-header-actions,
  .mp-section-header-actions { justify-content: flex-start; }
  .mp-form-grid-2,
  .mp-form-grid-3 { grid-template-columns: 1fr; }
  .mp-definition-list { grid-template-columns: 1fr; gap: .2rem; }
  .mp-definition-list dd { margin-bottom: .65rem; }
  .mp-review-item { grid-template-columns: auto minmax(0, 1fr); }
  .mp-review-value { grid-column: 1 / -1; text-align: start; }
  .mp-data-toolbar { align-items: stretch; flex-direction: column; }
  .mp-data-toolbar-actions { margin-inline-start: 0; }
  .mp-cookie-banner { align-items: stretch; flex-direction: column; }
  .mp-calendar { min-width: 44rem; }
  .mp-bottom-nav { display: grid; }
  .mp-has-bottom-nav { padding-bottom: calc(var(--mp-bottom-nav-height) + 1rem); }
}

@media (max-width: 520px) {
  .mp-site-header-inner { width: calc(100% - 1rem); }
  .mp-page-main,
  .mp-page-main-fluid { padding-inline: .75rem; }
  .mp-actions,
  .actions,
  .mp-form-actions,
  .mp-modal-footer,
  .mp-wizard-nav { align-items: stretch; flex-direction: column; }
  .mp-actions > *,
  .actions > *,
  .mp-form-actions > *,
  .mp-modal-footer > *,
  .mp-wizard-nav > * { width: 100%; }
  .mp-choice-visual { align-items: flex-start; }
  .mp-choice-media { --choice-media-size: 3.5rem; }
  .mp-otp { grid-template-columns: repeat(var(--otp-length, 6), minmax(0, 1fr)); }
  .mp-chat-message { max-width: 90%; }
  .mp-message-stack,
  .messages { right: .5rem; left: .5rem; width: auto; }
}

/* Responsive utility aliases */
@media (min-width: 640px) {
  .mp-flex-1-sm { flex: 1 1 0%; }
  .mp-grow-sm { flex-grow: 1; }
  .mp-min-w-0-sm { min-width: 0; }
  .mp-w-fit-sm { width: fit-content; }
  .mp-visible-sm { visibility: visible; }
  .mp-invisible-sm { visibility: hidden; }
}
@media (min-width: 768px) {
  .mp-flex-1-md { flex: 1 1 0%; }
  .mp-grow-md { flex-grow: 1; }
  .mp-min-w-0-md { min-width: 0; }
  .mp-w-fit-md { width: fit-content; }
  .mp-visible-md { visibility: visible; }
  .mp-invisible-md { visibility: hidden; }
}
@media (min-width: 1024px) {
  .mp-flex-1-lg { flex: 1 1 0%; }
  .mp-grow-lg { flex-grow: 1; }
  .mp-min-w-0-lg { min-width: 0; }
  .mp-w-fit-lg { width: fit-content; }
  .mp-visible-lg { visibility: visible; }
  .mp-invisible-lg { visibility: hidden; }
}


/* JavaScript state hooks used by the universal main.js. */
body.modal-open { overflow: hidden; }
.mp-lazy { opacity: 0; transition: opacity var(--transition-normal); }
.mp-lazy.is-loaded,
.mp-lazy:not([data-src]):not([data-srcset]) { opacity: 1; }
.mp-offcanvas-backdrop { position: fixed; z-index: calc(var(--mp-z-modal) - 1); inset: 0; background: var(--mp-overlay); backdrop-filter: blur(3px); }
.mp-message { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: .8rem 2.5rem .8rem .9rem; border: 1px solid var(--clr-border); border-inline-start-width: 4px; border-radius: var(--radius-md); background: var(--clr-surface); color: var(--clr-text); box-shadow: var(--shadow-xs); }

/* ========================================================================== 
   25. PRINT, FORCED COLOURS AND USER-PREFERENCE SUPPORT
   ========================================================================== */
@media print {
  :root { color-scheme: light; }
  body { background: #fff !important; color: #000 !important; font-size: 10pt; }
  .mp-site-header,
  .site-header,
  .mp-sidebar,
  .sidebar,
  .mp-topbar,
  .topbar,
  .mp-bottom-nav,
  .mp-fab,
  .mp-back-to-top,
  .mp-no-print,
  .no-print,
  .mp-toast-container,
  .mp-message-stack,
  .messages,
  .mp-cookie-banner,
  .mp-command-palette,
  .mp-data-toolbar,
  .mp-form-actions-sticky { display: none !important; }
  .mp-only-print,
  .only-print { display: block !important; }
  .mp-workspace,
  .mp-app-body,
  .mp-doc-layout,
  .mp-doc-layout-wide { display: block !important; }
  .mp-page-main,
  .mp-page-main-fluid,
  .mp-doc-article { max-width: none; width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .mp-card,
  .card,
  .panel,
  .mp-panel,
  .mp-table-wrap,
  .table-wrap { box-shadow: none !important; break-inside: avoid; }
  .mp-form-actions { display: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
  a[href^="#"]::after,
  a[href^="javascript:"]::after { content: ""; }
}

@media (prefers-contrast: more) {
  :root { --clr-border: color-mix(in srgb, var(--clr-text) 48%, transparent); --clr-border-light: color-mix(in srgb, var(--clr-text) 28%, transparent); }
  .mp-btn,
  .button,
  .btn,
  .mp-input,
  .mp-select,
  .mp-textarea { border-width: 2px; }
}

@media (forced-colors: active) {
  .mp-btn,
  .button,
  .btn,
  .mp-card,
  .card,
  .panel,
  .mp-panel,
  .mp-input,
  .mp-select,
  .mp-textarea,
  .mp-choice-visual { forced-color-adjust: auto; }
  .mp-status-dot,
  .mp-timeline-marker { border: 1px solid CanvasText; }
}

@media (prefers-reduced-transparency: reduce) {
  .mp-site-header,
  .site-header,
  .mp-topbar,
  .topbar,
  .mp-form-actions-sticky,
  .mp-cookie-banner { backdrop-filter: none; background: var(--clr-surface); }
}


/* Generated sizing, placement and transform utilities */
.mp-w-1\/5 { width: 20%; }
.mp-w-2\/5 { width: 40%; }
.mp-w-3\/5 { width: 60%; }
.mp-w-4\/5 { width: 80%; }
.mp-w-1\/6 { width: 16.666667%; }
.mp-w-5\/6 { width: 83.333333%; }
.mp-w-10 { width: 10%; }
.mp-max-w-10 { max-width: 10%; }
.mp-w-20 { width: 20%; }
.mp-max-w-20 { max-width: 20%; }
.mp-w-25 { width: 25%; }
.mp-max-w-25 { max-width: 25%; }
.mp-w-30 { width: 30%; }
.mp-max-w-30 { max-width: 30%; }
.mp-w-33 { width: 33%; }
.mp-max-w-33 { max-width: 33%; }
.mp-w-40 { width: 40%; }
.mp-max-w-40 { max-width: 40%; }
.mp-w-50 { width: 50%; }
.mp-max-w-50 { max-width: 50%; }
.mp-w-60 { width: 60%; }
.mp-max-w-60 { max-width: 60%; }
.mp-w-66 { width: 66%; }
.mp-max-w-66 { max-width: 66%; }
.mp-w-70 { width: 70%; }
.mp-max-w-70 { max-width: 70%; }
.mp-w-75 { width: 75%; }
.mp-max-w-75 { max-width: 75%; }
.mp-w-80 { width: 80%; }
.mp-max-w-80 { max-width: 80%; }
.mp-w-90 { width: 90%; }
.mp-max-w-90 { max-width: 90%; }
.mp-w-100 { width: 100%; }
.mp-max-w-100 { max-width: 100%; }
.mp-h-25 { height: 25%; }
.mp-h-50 { height: 50%; }
.mp-h-75 { height: 75%; }
.mp-h-100 { height: 100%; }
.mp-order-1 { order: 1; }
.mp-col-start-1 { grid-column-start: 1; }
.mp-row-start-1 { grid-row-start: 1; }
.mp-order-2 { order: 2; }
.mp-col-start-2 { grid-column-start: 2; }
.mp-row-start-2 { grid-row-start: 2; }
.mp-order-3 { order: 3; }
.mp-col-start-3 { grid-column-start: 3; }
.mp-row-start-3 { grid-row-start: 3; }
.mp-order-4 { order: 4; }
.mp-col-start-4 { grid-column-start: 4; }
.mp-row-start-4 { grid-row-start: 4; }
.mp-order-5 { order: 5; }
.mp-col-start-5 { grid-column-start: 5; }
.mp-row-start-5 { grid-row-start: 5; }
.mp-order-6 { order: 6; }
.mp-col-start-6 { grid-column-start: 6; }
.mp-row-start-6 { grid-row-start: 6; }
.mp-order-7 { order: 7; }
.mp-col-start-7 { grid-column-start: 7; }
.mp-row-start-7 { grid-row-start: 7; }
.mp-order-8 { order: 8; }
.mp-col-start-8 { grid-column-start: 8; }
.mp-row-start-8 { grid-row-start: 8; }
.mp-order-9 { order: 9; }
.mp-col-start-9 { grid-column-start: 9; }
.mp-row-start-9 { grid-row-start: 9; }
.mp-order-10 { order: 10; }
.mp-col-start-10 { grid-column-start: 10; }
.mp-row-start-10 { grid-row-start: 10; }
.mp-order-11 { order: 11; }
.mp-col-start-11 { grid-column-start: 11; }
.mp-row-start-11 { grid-row-start: 11; }
.mp-order-12 { order: 12; }
.mp-col-start-12 { grid-column-start: 12; }
.mp-row-start-12 { grid-row-start: 12; }
.mp-col-end-2 { grid-column-end: 2; }
.mp-row-end-2 { grid-row-end: 2; }
.mp-col-end-3 { grid-column-end: 3; }
.mp-row-end-3 { grid-row-end: 3; }
.mp-col-end-4 { grid-column-end: 4; }
.mp-row-end-4 { grid-row-end: 4; }
.mp-col-end-5 { grid-column-end: 5; }
.mp-row-end-5 { grid-row-end: 5; }
.mp-col-end-6 { grid-column-end: 6; }
.mp-row-end-6 { grid-row-end: 6; }
.mp-col-end-7 { grid-column-end: 7; }
.mp-row-end-7 { grid-row-end: 7; }
.mp-col-end-8 { grid-column-end: 8; }
.mp-row-end-8 { grid-row-end: 8; }
.mp-col-end-9 { grid-column-end: 9; }
.mp-row-end-9 { grid-row-end: 9; }
.mp-col-end-10 { grid-column-end: 10; }
.mp-row-end-10 { grid-row-end: 10; }
.mp-col-end-11 { grid-column-end: 11; }
.mp-row-end-11 { grid-row-end: 11; }
.mp-col-end-12 { grid-column-end: 12; }
.mp-row-end-12 { grid-row-end: 12; }
.mp-col-end-13 { grid-column-end: 13; }
.mp-row-end-13 { grid-row-end: 13; }
.mp-z-60 { z-index: 60; }
.mp-z-70 { z-index: 70; }
.mp-z-80 { z-index: 80; }
.mp-z-90 { z-index: 90; }
.mp-z-100 { z-index: 100; }
.mp-z-200 { z-index: 200; }
.mp-z-300 { z-index: 300; }
.mp-z-400 { z-index: 400; }
.mp-z-500 { z-index: 500; }
.mp-z-600 { z-index: 600; }
.mp-z-700 { z-index: 700; }
.mp-z-800 { z-index: 800; }
.mp-z-900 { z-index: 900; }
.mp-z-1000 { z-index: 1000; }
.mp-z-1300 { z-index: 1300; }
.mp-z-1400 { z-index: 1400; }
.mp-top-1 { top: var(--space-1); }
.mp-right-1 { right: var(--space-1); }
.mp-bottom-1 { bottom: var(--space-1); }
.mp-left-1 { left: var(--space-1); }
.mp-top-2 { top: var(--space-2); }
.mp-right-2 { right: var(--space-2); }
.mp-bottom-2 { bottom: var(--space-2); }
.mp-left-2 { left: var(--space-2); }
.mp-top-3 { top: var(--space-3); }
.mp-right-3 { right: var(--space-3); }
.mp-bottom-3 { bottom: var(--space-3); }
.mp-left-3 { left: var(--space-3); }
.mp-top-4 { top: var(--space-4); }
.mp-right-4 { right: var(--space-4); }
.mp-bottom-4 { bottom: var(--space-4); }
.mp-left-4 { left: var(--space-4); }
.mp-top-5 { top: var(--space-5); }
.mp-right-5 { right: var(--space-5); }
.mp-bottom-5 { bottom: var(--space-5); }
.mp-left-5 { left: var(--space-5); }
.mp-top-6 { top: var(--space-6); }
.mp-right-6 { right: var(--space-6); }
.mp-bottom-6 { bottom: var(--space-6); }
.mp-left-6 { left: var(--space-6); }
.mp-top-8 { top: var(--space-8); }
.mp-right-8 { right: var(--space-8); }
.mp-bottom-8 { bottom: var(--space-8); }
.mp-left-8 { left: var(--space-8); }
.mp-scale-0 { transform: scale(0); }
.mp-scale-25 { transform: scale(0.25); }
.mp-scale-50 { transform: scale(0.5); }
.mp-scale-75 { transform: scale(0.75); }
.mp-scale-100 { transform: scale(1); }
.mp-scale-125 { transform: scale(1.25); }
.mp-scale-150 { transform: scale(1.5); }
.mp-rotate-0 { transform: rotate(0deg); }
.mp-rotate-45 { transform: rotate(45deg); }
.mp-rotate-90 { transform: rotate(90deg); }
.mp-rotate-180 { transform: rotate(180deg); }
.mp-rotate-270 { transform: rotate(270deg); }

/* ========================================================================== 
   27. RUNTIME CONTRACT REFINEMENTS
   Neutral interaction states used by the universal main.js runtime.
   ========================================================================== */
html[data-theme] body,
html[data-theme] .mp-topbar,
html[data-theme] .mp-sidebar,
html[data-theme] .mp-card,
html[data-theme] .mp-panel,
html[data-theme] .mp-modal-dialog,
html[data-theme] .mp-dropdown-menu {
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.mp-modal { background: transparent; }
.mp-dropdown-menu[hidden],
.mp-offcanvas-backdrop[hidden] { display: none !important; }
.mp-dropdown-menu.active:not([hidden]) { display: block; }
.mp-dropdown-menu {
  top: calc(100% + .45rem);
  max-width: calc(100vw - 1rem);
  overflow: hidden;
  z-index: var(--mp-z-dropdown);
}
.mp-dropdown-item.active,
.mp-dropdown-item.is-active,
.mp-dropdown-item[aria-checked="true"] {
  color: var(--clr-text);
  background: var(--mp-primary-soft);
  font-weight: var(--fw-semibold);
}
.mp-theme-option { display: flex; align-items: center; gap: .65rem; }
.mp-theme-swatch {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  border: 1px solid var(--clr-border);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
.mp-theme-swatch-gold { background: linear-gradient(135deg, #c9a86a 0 50%, #f8f1e4 50%); }
.mp-theme-swatch-light { background: linear-gradient(135deg, #ffffff 0 50%, #e8edf3 50%); }
.mp-theme-swatch-navy { background: linear-gradient(135deg, #0e1b2c 0 50%, #21d4d4 50%); }
.mp-theme-indicator { margin-inline-start: auto; color: var(--clr-success-ink); font-weight: var(--fw-bold); }

.mp-accordion-header[aria-expanded="true"]::after { content: "−"; transform: rotate(180deg); }
.mp-accordion-header[aria-expanded="false"]::after { content: "+"; transform: none; }
.mp-accordion-content[hidden] { display: block !important; max-height: 0 !important; }
.mp-accordion-content.active:not([hidden]) { max-height: var(--accordion-max-height, 70rem); }

.mp-file-selection { margin-top: var(--space-3); }
.mp-file-list { display: grid; gap: .4rem; list-style: none; }
.mp-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: .55rem .7rem;
  border: 1px solid var(--clr-border-light);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--clr-bg) 58%, var(--clr-surface));
  color: var(--clr-text);
  font-size: var(--fs-sm);
}
.mp-file-item span { min-width: 0; overflow-wrap: anywhere; }
.mp-file-item small { flex: 0 0 auto; color: var(--clr-text-light); }

.mp-topbar-search { flex: 1 1 24rem; max-width: 42rem; }
.mp-topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.mp-topbar-theme-menu { width: 13.5rem; }
.mp-topbar .mp-dropdown-menu { color: var(--clr-text); background: var(--clr-surface); }

.mp-offcanvas { background: var(--mp-sidebar-bg); color: var(--mp-sidebar-text); }
.mp-offcanvas.active { visibility: visible; }
.mp-offcanvas[aria-hidden="true"] { visibility: hidden; }
.mp-offcanvas-backdrop { display: none; }
.mp-offcanvas-backdrop:not([hidden]) { display: block; }

@media (max-width: 900px) {
  .mp-topbar { flex-wrap: wrap; padding-block: .55rem; }
  .mp-topbar-search { order: 3; flex-basis: 100%; max-width: none; }
  .mp-topbar-actions { margin-inline-start: auto; }
}

@media (max-width: 520px) {
  .mp-topbar-title { max-width: 9rem; }
  .mp-topbar-actions .mp-btn-primary span { display: none; }
  .mp-topbar-actions .mp-btn-primary { width: var(--mp-control-height); padding-inline: 0; }
}


/* ========================================================================== 
   28. UNIVERSAL COMPOSITION COMPLETIONS
   Small structural classes used by the reference templates and suitable for
   reuse in any project. They contain no domain-specific presentation rules.
   ========================================================================== */
.mp-accordion { display: grid; gap: var(--space-2); }
.mp-choice-body { min-width: 0; flex: 1 1 auto; display: grid; gap: .2rem; }
.mp-choice-body small { color: var(--clr-text-light); font-size: var(--fs-sm); line-height: 1.45; }
.mp-code-block-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3); padding: .55rem .75rem; border-bottom: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: #b9c7d6; font-family: var(--ff-body); font-size: var(--fs-xs); }
.mp-display-number { display: block; font-size: clamp(4rem, 14vw, 9rem); font-weight: var(--fw-bold); line-height: .85; letter-spacing: -.06em; }
.mp-doc-lead { color: var(--clr-text-light); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.mp-form-help { display: block; margin-top: .35rem; color: var(--clr-text-light); font-size: var(--fs-xs); line-height: 1.45; }
.mp-icon-lg { width: 2rem; height: 2rem; }
.mp-setting-list { display: grid; border-top: 1px solid var(--clr-border-light); }
.mp-setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--clr-border-light); cursor: pointer; }
.mp-setting-row > span:first-child { min-width: 0; display: grid; gap: .2rem; }
.mp-setting-row small { color: var(--clr-text-light); font-size: var(--fs-sm); line-height: 1.45; }
.mp-status-neutral { color: var(--clr-text-light); background: color-mix(in srgb, var(--clr-text-light) 10%, var(--clr-surface)); }

/* Reusable SVG icon contract for sprite symbols whose ids begin with i-. */
use[href^="#i-"] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mp-btn > svg,
.mp-nav-toggle > svg,
.mp-sidebar-icon > svg,
.mp-modal-close > svg,
.mp-account-trigger > svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}
/* ========================================================================== 
   29. ADMINISTRATIVE DATA WORKSPACES
   Project-agnostic compositions for record management, filtering, bulk work,
   object tools and responsive administrative interfaces.
   ========================================================================== */
.mp-admin-shell {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.mp-admin-shell.has-filter-rail,
.mp-data-layout {
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  align-items: start;
}
.mp-admin-main,
.mp-admin-content,
.mp-data-results { min-width: 0; }
.mp-admin-aside,
.mp-filter-rail {
  position: sticky;
  top: calc(var(--mp-header-height, 4rem) + var(--space-4));
  max-height: calc(100vh - var(--mp-header-height, 4rem) - var(--space-8));
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  box-shadow: var(--shadow-sm);
}
.mp-filter-rail-header,
.mp-filter-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.mp-filter-rail-header {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--clr-border);
  background: color-mix(in srgb, var(--clr-surface) 96%, transparent);
  backdrop-filter: blur(10px);
}
.mp-filter-rail-body { display: grid; gap: var(--space-4); padding: var(--space-4); }
.mp-filter-group { display: grid; gap: var(--space-2); }
.mp-filter-group + .mp-filter-group { padding-top: var(--space-4); border-top: 1px solid var(--clr-border-light); }
.mp-filter-group-title { color: var(--clr-text); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.mp-filter-list { display: grid; gap: .2rem; list-style: none; }
.mp-filter-link,
.mp-filter-option {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: .45rem .55rem;
  border-radius: var(--radius-md);
  color: var(--clr-text-light);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.mp-filter-link:hover,
.mp-filter-option:hover,
.mp-filter-link.is-active,
.mp-filter-link[aria-current="true"] {
  color: var(--clr-text);
  background: var(--mp-primary-soft);
  text-decoration: none;
}
.mp-filter-count,
.mp-selection-count {
  min-width: 1.5rem;
  display: inline-grid;
  place-items: center;
  padding: .1rem .38rem;
  border-radius: var(--radius-full);
  color: var(--clr-text-light);
  background: color-mix(in srgb, var(--clr-text-light) 10%, var(--clr-surface));
  font-size: .72rem;
  font-weight: var(--fw-bold);
}
.mp-filter-toggle { display: none; }
.mp-filter-panel[hidden],
.mp-filter-rail[hidden] { display: none !important; }
.mp-filter-root.has-active-filters [data-active-filter-indicator],
[data-filter-root].has-active-filters [data-active-filter-indicator] { display: inline-flex; }
[data-active-filter-indicator] { display: none; }

.mp-object-toolbar,
.mp-record-toolbar,
.mp-data-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.mp-object-tools,
.mp-record-actions,
.mp-data-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
.mp-submit-bar,
.mp-action-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  box-shadow: var(--shadow-sm);
}
.mp-submit-bar.is-sticky,
.mp-action-footer.is-sticky {
  position: sticky;
  z-index: var(--mp-z-sticky, 300);
  bottom: var(--space-3);
  background: color-mix(in srgb, var(--clr-surface) 95%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}
.mp-submit-bar-primary,
.mp-submit-bar-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.mp-bulk-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: .65rem .8rem;
  border: 1px solid color-mix(in srgb, var(--clr-primary) 35%, var(--clr-border));
  border-radius: var(--radius-md);
  background: var(--mp-primary-soft);
  color: var(--clr-text);
}
.mp-bulk-bar.is-active,
.mp-bulk-bar:not([hidden]) { display: flex; }
.mp-bulk-bar[hidden] { display: none !important; }
.mp-bulk-summary { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.mp-bulk-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mp-data-row.is-selected,
tr.is-selected,
[data-select-row].is-selected {
  background: color-mix(in srgb, var(--clr-primary) 10%, var(--clr-surface));
  box-shadow: inset .2rem 0 0 var(--clr-primary);
}
.mp-action-checkbox { width: 2.7rem; text-align: center; }
.mp-action-checkbox input { width: 1rem; height: 1rem; }
.mp-sort-link { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
.mp-sort-link:hover { color: var(--clr-primary-hover); text-decoration: none; }
.mp-sort-indicator { width: .8rem; height: .8rem; color: var(--clr-text-light); }
.mp-sort-link[aria-sort="ascending"] .mp-sort-indicator { transform: rotate(180deg); color: var(--clr-primary); }
.mp-sort-link[aria-sort="descending"] .mp-sort-indicator { color: var(--clr-primary); }
.mp-paginator-summary { color: var(--clr-text-light); font-size: var(--fs-sm); }
.mp-list-item-unread,
.mp-notification-item.is-unread {
  border-inline-start: .25rem solid var(--clr-primary);
  background: color-mix(in srgb, var(--clr-primary) 6%, var(--clr-surface));
}
.mp-document-item,
.mp-record-item {
  padding: var(--space-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}
.mp-chip-soft {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: fit-content;
  padding: .28rem .6rem;
  border: 1px solid var(--clr-border-light);
  border-radius: var(--radius-full);
  color: var(--clr-text-light);
  background: color-mix(in srgb, var(--clr-bg) 60%, var(--clr-surface));
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* ========================================================================== 
   30. ENHANCED FORM WIDGETS
   Neutral components for related values, repeatable groups, dual-list
   selectors, date/time helpers, generated values and advanced field states.
   ========================================================================== */
.mp-fieldset {
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
}
.mp-fieldset + .mp-fieldset { margin-top: var(--space-4); }
.mp-fieldset-legend {
  width: auto;
  padding-inline: .35rem;
  color: var(--clr-text);
  font-weight: var(--fw-bold);
}
.mp-field-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.mp-field-row > * { grid-column: span 12; min-width: 0; }
.mp-field-row.is-compact { gap: var(--space-2); }
.mp-readonly-field {
  min-height: var(--mp-control-height);
  display: flex;
  align-items: center;
  padding: .55rem .7rem;
  border: 1px solid var(--clr-border-light);
  border-radius: var(--radius-md);
  color: var(--clr-text-light);
  background: color-mix(in srgb, var(--clr-bg) 70%, var(--clr-surface));
  overflow-wrap: anywhere;
}
.mp-field-error-list { display: grid; gap: .25rem; margin-top: .4rem; padding-inline-start: 1.1rem; color: var(--clr-danger-ink, var(--clr-danger)); font-size: var(--fs-xs); }
.mp-field-error-list:empty { display: none; }

.mp-related-field { display: flex; align-items: stretch; gap: var(--space-2); }
.mp-related-field > .mp-control,
.mp-related-field > .mp-input,
.mp-related-field > .mp-select { flex: 1 1 auto; min-width: 0; }
.mp-related-actions { display: inline-flex; align-items: stretch; gap: .25rem; }
.mp-related-action {
  width: var(--mp-control-height);
  min-height: var(--mp-control-height);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  color: var(--clr-text-light);
  background: var(--clr-surface);
  cursor: pointer;
}
.mp-related-action:hover { color: var(--clr-primary-hover); border-color: var(--clr-primary); background: var(--mp-primary-soft); text-decoration: none; }
.mp-related-action[aria-disabled="true"],
.mp-related-action:disabled { opacity: .5; pointer-events: none; }

.mp-clearable-file { display: grid; gap: var(--space-2); }
.mp-file-preview { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); }
.mp-file-preview-media { width: 3rem; height: 3rem; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-md); background: var(--mp-primary-soft); color: var(--clr-primary-hover); }
.mp-file-preview-media img { width: 100%; height: 100%; object-fit: cover; }
.mp-file-preview-copy { min-width: 0; flex: 1 1 auto; }
.mp-file-preview-copy strong,
.mp-file-preview-copy small { display: block; overflow-wrap: anywhere; }
.mp-file-preview-copy small { color: var(--clr-text-light); }

.mp-date-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .4rem; }
.mp-date-shortcut {
  min-height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .2rem .5rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-text-light);
  background: var(--clr-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.mp-date-shortcut:hover { color: var(--clr-primary-hover); border-color: var(--clr-primary); background: var(--mp-primary-soft); }
.mp-slug-preview { margin-top: .35rem; color: var(--clr-text-light); font-family: var(--ff-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.mp-password-state { display: flex; align-items: center; gap: var(--space-2); padding: .55rem .7rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); }
.mp-password-state.is-unusable { color: var(--clr-warning-ink, var(--clr-warning)); background: color-mix(in srgb, var(--clr-warning) 9%, var(--clr-surface)); }

.mp-repeater,
.mp-inline-set { display: grid; gap: var(--space-3); }
.mp-repeater-list,
.mp-inline-set-list { display: grid; gap: var(--space-3); }
.mp-repeater-item,
.mp-inline-set-item {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}
.mp-repeater-item.is-removing { opacity: .45; transform: scale(.99); pointer-events: none; }
.mp-repeater-item[hidden] { display: none !important; }
.mp-repeater-header,
.mp-inline-set-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.mp-repeater-title { display: grid; gap: .15rem; }
.mp-repeater-title small { color: var(--clr-text-light); }
.mp-repeater-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mp-repeater-empty { padding: var(--space-6); border: 1px dashed var(--clr-border); border-radius: var(--radius-lg); color: var(--clr-text-light); background: color-mix(in srgb, var(--clr-bg) 65%, var(--clr-surface)); text-align: center; }
.mp-repeater-empty[hidden] { display: none !important; }

.mp-dual-list {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}
.mp-dual-list-pane { min-width: 0; display: grid; grid-template-rows: auto auto minmax(12rem, 1fr) auto; gap: var(--space-2); }
.mp-dual-list-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.mp-dual-list-filter { position: relative; }
.mp-dual-list-filter .mp-control { padding-inline-start: 2rem; }
.mp-dual-list-filter-icon { position: absolute; top: 50%; left: .65rem; width: .9rem; height: .9rem; color: var(--clr-text-light); transform: translateY(-50%); pointer-events: none; }
[dir="rtl"] .mp-dual-list-filter-icon { right: .65rem; left: auto; }
[dir="rtl"] .mp-dual-list-filter .mp-control { padding-inline: 2rem .7rem; }
.mp-dual-list-select {
  width: 100%;
  min-height: 14rem;
  padding: .35rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  color: var(--clr-text);
  background: var(--clr-surface);
}
.mp-dual-list-select option { padding: .45rem .55rem; border-radius: var(--radius-sm); }
.mp-dual-list-select option:checked { color: var(--clr-primary-text); background: var(--clr-primary); }
.mp-dual-list-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); }
.mp-dual-list-controls .mp-btn { width: 2.5rem; min-width: 2.5rem; padding-inline: 0; }
.mp-dual-list-meta { color: var(--clr-text-light); font-size: var(--fs-xs); }

/* ========================================================================== 
   31. COMBOBOX AND AUTOCOMPLETE
   Dependency-free accessible listbox patterns for local or remote options.
   ========================================================================== */
.mp-combobox { position: relative; min-width: 0; }
.mp-combobox-input-wrap { position: relative; }
.mp-combobox-input-wrap .mp-control { padding-inline-end: 2.35rem; }
.mp-combobox-toggle,
.mp-combobox-clear {
  position: absolute;
  top: 50%;
  right: .45rem;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--clr-text-light);
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}
[dir="rtl"] .mp-combobox-toggle,
[dir="rtl"] .mp-combobox-clear { right: auto; left: .45rem; }
.mp-combobox-toggle:hover,
.mp-combobox-clear:hover { color: var(--clr-primary-hover); background: var(--mp-primary-soft); }
.mp-combobox-menu {
  position: absolute;
  z-index: var(--mp-z-dropdown);
  top: calc(100% + .35rem);
  right: 0;
  left: 0;
  max-height: min(20rem, 45vh);
  overflow: auto;
  padding: .3rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-lg);
}
.mp-combobox-menu[hidden] { display: none !important; }
.mp-combobox-option {
  display: grid;
  gap: .1rem;
  padding: .5rem .6rem;
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  cursor: pointer;
}
.mp-combobox-option:hover,
.mp-combobox-option.is-active,
.mp-combobox-option[aria-selected="true"] { background: var(--mp-primary-soft); }
.mp-combobox-option strong { font-size: var(--fs-sm); }
.mp-combobox-option small { color: var(--clr-text-light); font-size: var(--fs-xs); }
.mp-combobox-state { padding: .7rem; color: var(--clr-text-light); font-size: var(--fs-sm); text-align: center; }
.mp-combobox-spinner { width: 1rem; height: 1rem; display: inline-block; margin-inline-end: .35rem; border: 2px solid var(--clr-border); border-top-color: var(--clr-primary); border-radius: 50%; animation: mp-spin .8s linear infinite; vertical-align: middle; }

/* ========================================================================== 
   32. POPUP SELECTORS AND RELATED-RECORD CONTROLS
   Generic same-origin lookup windows and display states.
   ========================================================================== */
.mp-popup-selector { display: flex; align-items: center; gap: var(--space-2); }
.mp-popup-selector-value { min-width: 0; flex: 1 1 auto; }
.mp-popup-selector-status { color: var(--clr-text-light); font-size: var(--fs-xs); }
.mp-popup-selector-status.is-success { color: var(--clr-success-ink); }
.mp-popup-selector-status.is-error { color: var(--clr-danger-ink, var(--clr-danger)); }

@media (min-width: 640px) {
  .mp-field-row > .mp-col-sm-6 { grid-column: span 6; }
  .mp-field-row > .mp-col-sm-4 { grid-column: span 4; }
  .mp-field-row > .mp-col-sm-8 { grid-column: span 8; }
}
@media (min-width: 900px) {
  .mp-field-row > .mp-col-md-6 { grid-column: span 6; }
  .mp-field-row > .mp-col-md-4 { grid-column: span 4; }
  .mp-field-row > .mp-col-md-8 { grid-column: span 8; }
}
@media (max-width: 900px) {
  .mp-admin-shell.has-filter-rail,
  .mp-data-layout { grid-template-columns: 1fr; }
  .mp-filter-toggle { display: inline-flex; }
  .mp-filter-rail {
    position: fixed;
    z-index: var(--mp-z-modal);
    top: 0;
    right: 0;
    bottom: 0;
    width: min(22rem, 92vw);
    max-height: none;
    border-radius: 0;
    transform: translateX(105%);
    transition: transform var(--transition-normal);
  }
  [dir="rtl"] .mp-filter-rail { right: auto; left: 0; transform: translateX(-105%); }
  .mp-filter-rail.is-open { transform: translateX(0); }
  .mp-dual-list { grid-template-columns: 1fr; }
  .mp-dual-list-controls { flex-direction: row; flex-wrap: wrap; }
  .mp-dual-list-controls [data-dual-move="selected-to-target"],
  .mp-dual-list-controls [data-dual-move="all-to-target"] { transform: rotate(90deg); }
  .mp-dual-list-controls [data-dual-move="selected-to-source"],
  .mp-dual-list-controls [data-dual-move="all-to-source"] { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .mp-object-toolbar,
  .mp-record-toolbar,
  .mp-data-toolbar,
  .mp-submit-bar,
  .mp-action-footer,
  .mp-bulk-bar { align-items: stretch; flex-direction: column; }
  .mp-object-tools,
  .mp-record-actions,
  .mp-data-actions,
  .mp-submit-bar-primary,
  .mp-submit-bar-secondary,
  .mp-bulk-actions { justify-content: flex-start; }
  .mp-related-field { align-items: stretch; flex-direction: column; }
  .mp-related-actions { width: 100%; }
  .mp-related-action { flex: 1 1 auto; width: auto; }
}
@media print {
  .mp-filter-rail,
  .mp-filter-toggle,
  .mp-bulk-bar,
  .mp-object-tools,
  .mp-record-actions,
  .mp-related-actions,
  .mp-date-shortcuts,
  .mp-repeater-actions,
  .mp-dual-list-controls,
  .mp-combobox-menu { display: none !important; }
  .mp-admin-shell.has-filter-rail,
  .mp-data-layout,
  .mp-dual-list { display: block; }
  .mp-repeater-item,
  .mp-inline-set-item,
  .mp-document-item,
  .mp-record-item { break-inside: avoid; box-shadow: none; }
}

/* ========================================================================== 
   31. NATIVE HTML ELEMENTS AND COMPACT DJANGO FORM DEFAULTS
   --------------------------------------------------------------------------
   These rules make the design system usable directly with semantic HTML and
   Django-rendered widgets. Utility classes remain available, but ordinary
   elements receive coherent spacing, typography, controls and validation
   without a JavaScript class-decoration layer.
   ========================================================================== */

/* ---------- 31.1 Document flow and typographic elements ---------- */
main,
section,
article,
aside,
nav,
header,
footer { min-width: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 .55em;
  color: var(--clr-text);
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: clamp(1.55rem, 1.2rem + 1.45vw, 2.45rem); }
h2 { font-size: clamp(1.3rem, 1.08rem + .9vw, 1.9rem); }
h3 { font-size: clamp(1.12rem, 1rem + .55vw, 1.5rem); }
h4 { font-size: 1.08rem; }
h5 { font-size: 1rem; }
h6 { font-size: .9rem; }

p,
ul,
ol,
dl,
blockquote,
pre,
table,
figure,
details { margin: 0 0 var(--space-4); }

p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
blockquote:last-child,
pre:last-child,
table:last-child,
figure:last-child,
details:last-child { margin-bottom: 0; }

ul,
ol { padding-inline-start: 1.35rem; }
li + li { margin-top: .22rem; }
dt { font-weight: var(--fw-semibold); }
dd { margin: .2rem 0 .65rem; color: var(--clr-text-light); }

small { font-size: var(--fs-xs); }
mark { padding: .08em .24em; border-radius: var(--radius-sm); background: var(--mp-warning-soft); color: var(--clr-text); }

blockquote {
  padding: .7rem .9rem;
  border-inline-start: .24rem solid var(--clr-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--clr-primary-light) 55%, var(--clr-surface));
  color: var(--clr-text-light);
}

hr { margin: var(--space-5) 0; border: 0; border-top: 1px solid var(--clr-border); }

code,
kbd,
samp,
pre { font-family: var(--ff-mono); }
code { padding: .08em .28em; border-radius: var(--radius-sm); background: var(--clr-border-light); font-size: .9em; }
kbd { display: inline-block; padding: .12rem .38rem; border: 1px solid var(--clr-border); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--clr-surface); box-shadow: var(--shadow-xs); font-size: .82em; }
pre { max-width: 100%; overflow: auto; padding: .8rem .9rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--clr-bg) 72%, var(--clr-surface)); font-size: .82rem; line-height: 1.5; }
pre code { padding: 0; background: transparent; }

/* ---------- 31.2 Media, disclosure and overlays ---------- */
figure { display: grid; gap: .45rem; }
figcaption { color: var(--clr-text-light); font-size: var(--fs-xs); }
iframe { max-width: 100%; border: 0; }

summary { cursor: pointer; font-weight: var(--fw-semibold); }
details { padding: .7rem .85rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); }
details[open] > summary { margin-bottom: .55rem; }

dialog { width: min(92vw, 42rem); max-height: 88vh; overflow: auto; padding: 0; border: 1px solid var(--clr-border); border-radius: var(--radius-xl); background: var(--clr-surface); color: var(--clr-text); box-shadow: var(--shadow-xl); }
dialog::backdrop { background: rgba(var(--mp-navy-rgb), .58); backdrop-filter: blur(3px); }

/* ---------- 31.3 Native tables ---------- */
table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: .84rem; }
caption { padding: .5rem .65rem; color: var(--clr-text-light); font-size: var(--fs-xs); text-align: start; }
th,
td { padding: .52rem .65rem; border-bottom: 1px solid var(--clr-border-light); text-align: start; vertical-align: middle; }
th { color: var(--clr-text-light); background: color-mix(in srgb, var(--clr-bg) 74%, var(--clr-surface)); font-size: .72rem; font-weight: var(--fw-bold); letter-spacing: .025em; text-transform: uppercase; }
tbody tr:hover { background: color-mix(in srgb, var(--clr-primary-light) 34%, transparent); }

/* ---------- 31.4 Native forms and Django widgets ---------- */
form { display: grid; gap: .78rem; min-width: 0; }
fieldset { min-width: 0; padding: .8rem; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
legend { max-width: 100%; padding: 0 .35rem; font-size: .9rem; font-weight: var(--fw-bold); }
label { display: inline-block; margin: 0 0 .24rem; font-size: .78rem; font-weight: var(--fw-semibold); line-height: 1.3; }

form p,
form .form-row,
form .field-row,
form .form-group,
form .mp-form-group { min-width: 0; margin: 0; }

form p { display: grid; gap: .25rem; }

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--mp-control-height-sm);
  padding: .4rem .58rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: .86rem;
  line-height: 1.35;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

textarea { min-height: 5.15rem; resize: vertical; }
select { padding-inline-end: 2rem; }

input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--clr-text-light) 70%, transparent); }

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):hover,
select:hover,
textarea:hover { border-color: color-mix(in srgb, var(--clr-text) 28%, var(--clr-border)); }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible { outline: 2px solid var(--mp-focus); outline-offset: 1px; box-shadow: var(--mp-focus-ring); }

input:disabled,
select:disabled,
textarea:disabled,
button:disabled { cursor: not-allowed; opacity: .68; }

input[readonly],
textarea[readonly] { background: color-mix(in srgb, var(--clr-bg) 78%, var(--clr-surface)); }

input[type="checkbox"],
input[type="radio"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--clr-primary); vertical-align: middle; }

input[type="file"] { width: 100%; min-height: var(--mp-control-height-sm); padding: .25rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); font-size: .8rem; }
input[type="file"]::file-selector-button { min-height: 1.9rem; margin-inline-end: .5rem; padding: .3rem .58rem; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-bg); color: var(--clr-text); cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--clr-primary-light); }

input[type="color"] { width: 2.6rem; min-height: var(--mp-control-height-sm); padding: .18rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); }
input[type="range"] { width: 100%; accent-color: var(--clr-primary); }

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: var(--mp-control-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: auto;
  padding: .38rem .68rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--clr-primary);
  color: var(--clr-primary-text);
  font-size: .82rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover { transform: translateY(-1px); background: var(--clr-primary-hover); box-shadow: var(--shadow-sm); }

button[type="reset"],
input[type="reset"] { border-color: var(--clr-border); background: var(--clr-surface); color: var(--clr-text); }

progress,
meter { width: 100%; height: .72rem; accent-color: var(--clr-primary); }
output { font-variant-numeric: tabular-nums; }

/* Django-generated help and error structures. */
.helptext,
.form-text,
.mp-help-text { display: block; margin: .15rem 0 0; color: var(--clr-text-light); font-size: .7rem; line-height: 1.35; }

.errorlist,
.mp-field-error-list { display: grid; gap: .16rem; margin: .18rem 0 0; padding: 0; color: var(--clr-danger); font-size: .72rem; line-height: 1.35; list-style: none; }
.nonfield,
.non-field-errors { padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--clr-danger) 42%, var(--clr-border)); border-radius: var(--radius-md); background: var(--mp-danger-soft); color: var(--clr-danger); }

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
input.is-invalid,
select.is-invalid,
textarea.is-invalid { border-color: var(--clr-danger) !important; }

/* Compact forms are the standard density; spacious forms opt in explicitly. */
.mp-form,
.mp-form-compact { gap: .72rem; }
.mp-form-section { padding: .8rem; }
.mp-form-grid,
.form-grid { gap: .68rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.mp-form-group,
.form-group { gap: .24rem; }
.mp-form-actions { gap: .45rem; margin-top: .55rem; }
.mp-form-spacious { gap: var(--space-5); }
.mp-form-spacious .mp-form-section { padding: clamp(1rem, 2vw, 1.35rem); }
.mp-form-spacious .mp-form-grid,
.mp-form-spacious.form-grid { gap: var(--space-4); }
.mp-form-spacious .mp-form-actions { margin-top: var(--space-5); }

@media (max-width: 767px) {
  fieldset { padding: .7rem; }
  .mp-form-grid-2,
  .mp-form-grid-3 { grid-template-columns: 1fr; }
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] { max-width: 100%; }
}


/* ==========================================================================
   32. BENIRARISE APPLICATION PATTERNS — INTEGRATED INTO MAIN.CSS
   ========================================================================== */
/* Benira Rise integration layer for the supplied universal design system. */
:root {
  --mp-header-height: 4.25rem;
  --mp-sidebar-width: 16.5rem;
  --mp-control-height: 2.45rem;
  --mp-control-height-sm: 2.1rem;
  --mp-content-xl: 92rem;
  --benira-navy: var(--mp-navy);
  --benira-gold: var(--mp-gold);
  --benira-silver: var(--clr-border);
  --benira-silver-dark: var(--clr-muted);
  --benira-radius-lg: var(--radius-lg);
  --benira-shadow-sm: var(--shadow-sm);
  --benira-shadow-md: var(--shadow-md);
  --benira-gold-rgb: var(--mp-gold-rgb);
}

body { font-size: .95rem; }
main.mp-app-body > .mp-page-main-fluid { padding: 0; }
.mp-page-main-fluid > section,
.mp-page-main-fluid > .mp-container,
.mp-page-main-fluid > .mp-container-fluid,
.mp-page-main-fluid > .mp-dashboard-shell,
.mp-page-main-fluid > .benira-dashboard-shell { padding-block: clamp(.9rem, 2vw, 1.5rem); }

.mp-skip-link { position: fixed; left: .75rem; top: .5rem; z-index: 10000; transform: translateY(-160%); padding: .55rem .8rem; border-radius: var(--radius-md); background: var(--clr-primary); color: var(--clr-primary-text); }
.mp-skip-link:focus { transform: translateY(0); }
.mp-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.mp-brand { min-width: max-content; display: inline-flex; align-items: center; gap: .65rem; color: var(--mp-header-text); text-decoration: none; }
.mp-brand:hover { text-decoration: none; }
.mp-brand-mark, .mp-sidebar-brand-mark { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: .6rem; background: linear-gradient(135deg, var(--mp-gold), var(--mp-gold-dark)); color: var(--mp-navy); font-weight: 850; letter-spacing: -.04em; box-shadow: var(--shadow-sm); }
.mp-brand-copy { display: grid; line-height: 1.05; }
.mp-brand-copy strong { font-size: 1rem; }
.mp-brand-copy small { margin-top: .18rem; color: var(--mp-header-muted); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
.mp-header-actions { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; }
.mp-account-trigger { min-height: 2.4rem; display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .45rem; border: 1px solid var(--mp-sidebar-border); border-radius: var(--radius-md); background: transparent; color: var(--mp-header-text); cursor: pointer; }
.mp-dropdown-menu-end { right: 0; left: auto; }
.mp-message-stack { position: relative; z-index: 30; display: grid; gap: .5rem; padding-top: .75rem; }
.mp-alert-close { margin-inline-start: auto; border: 0; background: transparent; color: inherit; font-size: 1.15rem; cursor: pointer; }

.mp-site-footer { margin-top: auto; padding-top: 2rem; color: #eef3f8; background: var(--mp-navy); }
.mp-footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(12rem, .8fr) auto; gap: 2rem; align-items: start; }
.mp-footer-links { display: grid; gap: .55rem; }
.mp-footer-links a { color: #c5d0dc; }
.mp-footer-account { justify-self: end; }
.mp-footer-bottom { margin-top: 1.5rem; padding-block: 1rem; border-top: 1px solid rgba(255,255,255,.12); color: #9eacbb; }
.mp-brand-footer { color: #fff; }

/* Compact forms: explicit labels and fields remain visible without excessive vertical expansion. */
.mp-form-compact { gap: .85rem; }
.mp-form-compact .mp-form-section,
.mp-form-compact .benira-empty-box,
.mp-form-compact .mp-panel { padding: .85rem; }
.mp-form-compact .mp-form-grid,
.mp-form-compact .mp-row,
.mp-form-compact .form-grid { gap: .75rem; }
.mp-form-compact .mp-form-group,
.mp-form-compact .form-group,
.mp-form-compact [class*="mp-col-"] { min-width: 0; }
.mp-form-compact .mp-form-group { gap: .28rem; margin-bottom: 0; }
.mp-form-compact .mp-label { margin: 0; font-size: .78rem; line-height: 1.25; }
.mp-form-compact .mp-input,
.mp-form-compact .mp-select,
.mp-form-compact .mp-control { min-height: 2.25rem; padding: .42rem .6rem; font-size: .88rem; }
.mp-form-compact .mp-textarea { min-height: 5.25rem; padding: .5rem .6rem; font-size: .88rem; }
.mp-form-compact .mp-help-text { margin-top: 0; font-size: .72rem; line-height: 1.3; }
.mp-form-compact .mp-form-actions { margin-top: .75rem; }
.mp-form-compact input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.mp-form-compact select,
.mp-form-compact textarea { width: 100%; }

/* Safe baseline before JavaScript decorates Django widgets. */
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
form select,
form textarea { min-height: var(--mp-control-height-sm); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: .42rem .6rem; color: var(--clr-text); background: var(--clr-surface); }
form textarea { min-height: 5.5rem; resize: vertical; }
form input:focus, form select:focus, form textarea:focus { border-color: var(--mp-focus); outline: 0; box-shadow: var(--mp-focus-ring); }
.errorlist { display: grid; gap: .2rem; margin: .25rem 0 0; padding-left: 1rem; color: var(--clr-danger); font-size: .75rem; }

/* Semantic compatibility for existing Benira templates, now driven by mp tokens. */
.bg-benira-navy { background: var(--mp-navy) !important; }
.text-benira-navy { color: var(--mp-navy) !important; }
.shadow-benira-md { box-shadow: var(--shadow-md); }
.badge-benira-gold, .benira-live-badge, .benira-soft-chip, .benira-warning-chip, .access-pill, .report-count-badge, .benira-action-count { display: inline-flex; align-items: center; width: fit-content; min-height: 1.65rem; padding: .18rem .5rem; border-radius: var(--radius-full); font-size: .7rem; font-weight: 750; }
.badge-benira-gold, .benira-live-badge { background: var(--mp-primary-soft); color: var(--clr-primary-hover); }
.badge-benira-outline, .benira-soft-chip, .access-pill { border: 1px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-text-light); }
.benira-warning-chip { background: var(--mp-warning-soft); color: var(--clr-warning); }

.benira-panel, .benira-empty-box, .public-admin-card, .report-card, .rate-card,
.request-info-box, .client-payment-box, .profile-info-box, .user-info-box,
.benira-kpi-card, .benira-action-card, .report-mini-item, .report-status-item,
.benira-document-item { border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-xs); }
.benira-panel, .benira-empty-box, .request-info-box, .client-payment-box, .profile-info-box, .user-info-box { padding: 1rem; }
.benira-panel-header, .public-admin-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--clr-border-light); }
.benira-panel-header.compact { padding: .7rem .85rem; }
.public-admin-card-body, .benira-panel-body { padding: 1rem; }
.benira-document-list { display: grid; gap: .65rem; }
.benira-document-item { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .7rem; }
.benira-action-card { display: block; padding: .85rem; color: var(--clr-text); text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.benira-action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }

.auth-page-shell { min-height: calc(100vh - var(--mp-header-height)); display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at top right, var(--mp-primary-soft), transparent 38%), var(--clr-bg); }
.auth-card { width: min(100%, 30rem); overflow: hidden; border: 1px solid var(--clr-border); border-radius: var(--radius-xl); background: var(--clr-surface); box-shadow: var(--shadow-lg); }
.auth-card-wide { width: min(100%, 48rem); }
.auth-card-header { padding: 1rem 1.2rem; color: #fff; background: var(--mp-navy); }
.auth-card-header h1 { margin: 0; font-size: 1.35rem; }
.auth-card-body { padding: 1rem 1.2rem; }
.auth-two-column { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.auth-form-group { display: grid; gap: .3rem; margin-bottom: .75rem; }
.auth-form-label { font-size: .78rem; font-weight: 700; }
.auth-input-wrap { position: relative; }
.auth-input-wrap input { width: 100%; padding-left: 2.15rem !important; }
.auth-input-icon { position: absolute; z-index: 1; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--clr-text-light); pointer-events: none; }
.auth-error-text { color: var(--clr-danger); font-size: .73rem; }
.auth-submit-btn { width: 100%; }
.auth-footer { margin-top: .8rem; text-align: center; font-size: .82rem; }
.auth-feature-strip { padding: .85rem 1.2rem; border-top: 1px solid var(--clr-border); background: var(--clr-bg); }
.auth-feature-strip h2 { font-size: .85rem; }
.auth-feature-list { display: grid; gap: .3rem; margin: .5rem 0 0; padding-left: 1.1rem; color: var(--clr-text-light); font-size: .76rem; }

.mp-content-workspace { min-height: calc(100vh - var(--mp-header-height)); }
.mp-content-workspace .mp-sidebar { position: sticky; top: var(--mp-header-height); height: calc(100vh - var(--mp-header-height)); }
.public-admin-topbar, .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-primary); border-radius: var(--radius-lg); background: var(--clr-surface); }
.public-admin-title { margin: 0; font-size: 1.4rem; }
.public-admin-subtitle { color: var(--clr-text-light); font-size: .84rem; }

/* Bootstrap-like class remnants kept only where a template-specific script relies on them. */
.active { }
.disabled, [disabled], [aria-disabled="true"] { opacity: .6; pointer-events: none; }
.mp-list-group { display: grid; margin: 0; padding: 0; list-style: none; }
.mp-list-group-item { padding: .7rem .8rem; border-bottom: 1px solid var(--clr-border-light); background: var(--clr-surface); }
.mp-list-group-item:last-child { border-bottom: 0; }
.mp-badge { display: inline-flex; align-items: center; padding: .2rem .48rem; border-radius: var(--radius-full); background: var(--mp-primary-soft); color: var(--clr-primary-hover); font-size: .7rem; font-weight: 750; }
.mp-badge-outline { border: 1px solid currentColor; background: transparent; }
.mp-badge-warning { background: var(--mp-warning-soft); color: var(--clr-warning); }

@media (max-width: 1023px) {
  .mp-content-workspace { display: block; }
  .mp-content-workspace .mp-sidebar { position: relative; top: auto; width: 100%; height: auto; }
  .mp-sidebar-body { max-height: 18rem; }
  .mp-footer-grid { grid-template-columns: 1fr 1fr; }
  .mp-footer-account { justify-self: start; }
}
@media (max-width: 767px) {
  .mp-site-header-inner { flex-wrap: wrap; }
  .mp-header-actions { margin-left: auto; }
  .mp-nav-links { order: 4; flex-basis: 100%; }
  .mp-footer-grid { grid-template-columns: 1fr; }
  .auth-two-column { grid-template-columns: 1fr; }
  .mp-form-grid-2, .mp-form-grid-3 { grid-template-columns: 1fr; }
  .mp-page-header, .page-heading, .public-admin-topbar { align-items: flex-start; flex-direction: column; }
}


/* Additional semantic page patterns retained from the application templates. */
.benira-dashboard-shell, .governance-page { min-height: calc(100vh - var(--mp-header-height)); background: var(--clr-bg); }
.benira-dashboard-container { width: min(calc(100% - 2rem), var(--mp-content-xl)); margin-inline: auto; }
.benira-dashboard-topbar, .governance-hero, .payment-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-primary); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--shadow-sm); }
.benira-dashboard-kicker, .governance-kicker { color: var(--clr-primary-hover); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.benira-dashboard-title, .governance-title { margin: .2rem 0; font-size: clamp(1.35rem,2.5vw,2rem); }
.benira-dashboard-subtitle, .governance-subtitle { color: var(--clr-text-light); }
.benira-dashboard-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.benira-kpi-grid, .benira-action-grid, .benira-shortcut-grid, .executive-data-grid, .funnel-grid, .payment-invoice-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap: .75rem; }
.benira-kpi-card, .executive-metric-card, .governance-summary-card, .payment-summary-card, .payment-invoice-card, .data-quality-card, .funnel-stage { padding: .85rem; }
.executive-metric-label, .report-card-label, .rate-label, .summary-label, .scorecard-label, .data-quality-title, .funnel-title { color: var(--clr-text-light); font-size: .75rem; font-weight: 700; }
.executive-metric-value, .report-card-value, .rate-value, .summary-value, .scorecard-value, .data-quality-count, .funnel-count { margin-top: .25rem; font-size: 1.45rem; font-weight: 800; line-height: 1; }
.executive-metric-note, .report-card-note, .rate-note, .summary-note, .scorecard-note, .data-quality-note, .funnel-note { margin-top: .3rem; color: var(--clr-text-light); font-size: .72rem; }
.report-card, .report-centre-card, .executive-scorecard-card, .governance-mini-card, .finance-mini-box, .payment-mini-box, .report-metric-box { padding: .8rem; }
.report-mini-item, .report-status-item, .executive-mini-item, .finance-action-item, .finance-activity-item, .activity-timeline-card, .client-activity-card, .client-version-card { padding: .65rem .75rem; }
.report-status-list, .executive-list, .finance-action-list, .finance-activity-list, .activity-timeline, .client-activity-timeline, .client-version-timeline, .payment-list, .payment-guide-list, .compact-upload-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.activity-timeline-item, .client-activity-timeline-item, .client-version-item { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .65rem; }
.activity-timeline-marker, .client-activity-marker, .client-version-marker, .executive-dot, .workstation-status-dot { width: .65rem; height: .65rem; margin-top: .45rem; border-radius: 50%; background: var(--clr-primary); }

.request-start-section, .milestone-form-section, .task-form-section, .workspace-form-section, .client-update-section, .assignment-form-section, .document-form-section, .agreement-section, .agreement-document-edit-section, .finance-review-section, .project-content-section, .request-section { padding: .8rem; border: 1px solid var(--clr-border-light); border-radius: var(--radius-lg); background: color-mix(in srgb,var(--clr-bg) 55%,var(--clr-surface)); }
.request-start-section + .request-start-section, .milestone-form-section + .milestone-form-section, .task-form-section + .task-form-section { margin-top: .75rem; }
.review-question, .public-admin-field-box, .finance-review-box, .review-info-box, .governance-filter-card, .governance-panel, .governance-notice, .assignment-delete-box, .client-visibility-box { padding: .8rem; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
.governance-panel-header { display:flex; justify-content:space-between; gap:.75rem; padding-bottom:.6rem; margin-bottom:.6rem; border-bottom:1px solid var(--clr-border-light); }

.report-table, .governance-table, .public-admin-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.report-table th, .report-table td, .governance-table th, .governance-table td, .public-admin-table th, .public-admin-table td { padding:.55rem .65rem; border-bottom:1px solid var(--clr-border-light); text-align:left; vertical-align:middle; }
.report-table th, .governance-table th, .public-admin-table th { color:var(--clr-text-light); background:var(--clr-bg); font-size:.7rem; letter-spacing:.03em; text-transform:uppercase; }
.governance-table-wrap, .payment-table-wrap { overflow-x:auto; border:1px solid var(--clr-border); border-radius:var(--radius-lg); }

.status-pill, .report-badge, .group-chip, .risk-chip, .industry-tag, .badge-benira-teal, .benira-danger-chip { display:inline-flex; align-items:center; min-height:1.55rem; padding:.15rem .45rem; border-radius:var(--radius-full); font-size:.68rem; font-weight:750; }
.status-pill, .group-chip, .industry-tag { background:var(--mp-primary-soft); color:var(--clr-primary-hover); }
.report-badge, .badge-benira-teal { background:var(--mp-info-soft); color:var(--clr-info); }
.risk-chip, .benira-danger-chip { background:var(--mp-danger-soft); color:var(--clr-danger); }

.public-admin-empty, .no-flag-text { display:grid; place-items:center; min-height:8rem; padding:1rem; border:1px dashed var(--clr-border); border-radius:var(--radius-lg); color:var(--clr-text-light); text-align:center; }
.hover-benira-lift { transition:transform var(--transition-fast),box-shadow var(--transition-fast); }
.hover-benira-lift:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.hover-benira-gold:hover { color:var(--mp-gold) !important; }
.danger-link { color:var(--clr-danger); }
.strong-link { font-weight:700; }
.small-link { font-size:.75rem; }
.money, .small-money, .agreement-code { font-variant-numeric:tabular-nums; }

@media (max-width:767px){
 .benira-dashboard-topbar,.governance-hero,.payment-hero{align-items:flex-start;flex-direction:column}
}