/* Mendpoint — flattened design-system stylesheet. Generated from tokens/ + components/. Do not edit; edit the source and rebuild. */

/* tokens/colors.css */
:root {
  
  --navy-1000: oklch(0.060 0.018 264); 
  --navy-950:  oklch(0.085 0.018 264); 
  --navy-900:  oklch(0.100 0.018 264); 
  --navy-850:  oklch(0.115 0.018 264); 
  --navy-800:  oklch(0.140 0.018 264); 
  --navy-700:  oklch(0.180 0.018 264); 

  --slate-700: oklch(0.220 0.018 264); 
  --slate-600: oklch(0.300 0.018 264); 
  --slate-500: oklch(0.420 0.015 240); 
  --slate-400: oklch(0.580 0.015 240); 
  --slate-300: oklch(0.750 0.010 240); 
  --slate-200: oklch(0.850 0.008 240); 
  --slate-100: oklch(0.900 0.008 240); 
  --slate-50:  oklch(0.940 0.008 240); 
  --white: #ffffff;

  
  --indigo-200: oklch(0.850 0.090 264.5); 
  --indigo-300: oklch(0.750 0.150 264.5); 
  --indigo-400: oklch(0.680 0.190 264.5); 
  --indigo-500: oklch(0.585 0.233 264.5); 
  --indigo-600: oklch(0.520 0.233 264.5); 
  --indigo-700: oklch(0.450 0.200 264.5); 

  
  --cyan-300: oklch(0.820 0.120 198); 
  --cyan-400: oklch(0.770 0.140 198); 
  --cyan-500: oklch(0.720 0.160 198); 
  --cyan-600: oklch(0.650 0.150 198); 

  
  --amber-300: oklch(0.860 0.130 75); 
  --amber-400: oklch(0.820 0.150 75); 
  --amber-500: oklch(0.780 0.170 75); 
  --amber-600: oklch(0.700 0.160 75); 

  
  --red-300: oklch(0.780 0.140 25); 
  --red-400: oklch(0.720 0.190 25); 
  --red-500: oklch(0.650 0.220 25); 
  --red-600: oklch(0.580 0.210 25); 
  --red-700: oklch(0.500 0.180 25); 

  
  --violet-300: oklch(0.750 0.140 300); 
  --violet-400: oklch(0.620 0.150 300); 
  --violet-500: oklch(0.500 0.150 300); 

  
  --emerald-300: oklch(0.820 0.140 162);
  --emerald-400: oklch(0.770 0.155 162);
  --emerald-500: oklch(0.720 0.170 162);
  --emerald-600: oklch(0.640 0.160 162);
  --emerald-700: oklch(0.540 0.140 162);

  
  --tint-indigo-10: oklch(0.585 0.233 264.5 / 0.10);
  --tint-indigo-16: oklch(0.585 0.233 264.5 / 0.16);
  --tint-indigo-28: oklch(0.585 0.233 264.5 / 0.28);
  --tint-indigo-35: oklch(0.585 0.233 264.5 / 0.35);
  --tint-cyan-10:   oklch(0.720 0.160 198 / 0.10);
  --tint-cyan-28:   oklch(0.720 0.160 198 / 0.28);
  --tint-amber-10:  oklch(0.780 0.170 75 / 0.10);
  --tint-amber-28:  oklch(0.780 0.170 75 / 0.28);
  --tint-red-10:    oklch(0.650 0.220 25 / 0.10);
  --tint-red-18:    oklch(0.650 0.220 25 / 0.18);
  --tint-red-28:    oklch(0.650 0.220 25 / 0.28);
  --tint-violet-12: oklch(0.500 0.150 300 / 0.16);
  --tint-violet-30: oklch(0.500 0.150 300 / 0.34);
  --tint-emerald-10: oklch(0.720 0.170 162 / 0.10);
  --tint-emerald-30: oklch(0.720 0.170 162 / 0.30);

  
  --surface-base:    var(--navy-950);
  --surface-sunken:  var(--navy-1000);
  --surface-raised:  var(--navy-850);
  --surface-overlay: var(--navy-850);
  --surface-inset:   var(--navy-800);
  --surface-hover:   oklch(1 0 0 / 0.04); 
  --surface-active:  oklch(1 0 0 / 0.07); 
  --surface-accent:  var(--tint-indigo-10);
  --surface-danger:  var(--tint-red-10);
  --surface-warn:    var(--tint-amber-10);

  --glass-bg: oklch(0.115 0.018 264 / 0.66);
  --glass-blur: 12px;
  --glass-border: var(--slate-700);

  --text-primary:    var(--slate-50);
  --text-secondary:  var(--slate-300);
  --text-tertiary:   var(--slate-400);
  --text-disabled:   var(--slate-500);
  --text-inverse:    var(--navy-950);
  --text-accent:     var(--indigo-400);
  --text-danger:     var(--red-400);
  --text-warn:       var(--amber-400);
  --text-link:       var(--indigo-400);
  --text-link-hover: var(--indigo-300);

  
  --border-subtle:  var(--navy-700);  
  --border-default: var(--slate-700); 
  --border-strong:  var(--slate-600); 
  --border-accent:  var(--indigo-500);
  --border-danger:  var(--red-500);
  --border-focus:   var(--indigo-500);

  
  --diff-add-bg:  var(--tint-emerald-10);
  --diff-add-bar: var(--emerald-500);
  --diff-add-fg:  var(--emerald-300);
  --diff-del-bg:  var(--tint-red-10);
  --diff-del-bar: var(--red-500);
  --diff-del-fg:  var(--red-300);
  --diff-ctx-fg:  var(--slate-200);
  --diff-gutter:  var(--slate-500);

  
  --status-open:    var(--emerald-500);
  --status-merged:  var(--violet-400);
  --status-draft:   var(--slate-400);
  --status-failing: var(--red-500);
  --status-pending: var(--amber-500);

  
  --fettler-500: var(--cyan-500);
  --fettler-300: var(--cyan-300);
  --fettler-surface: var(--tint-cyan-10);
  --fettler-border:  var(--tint-cyan-28);
  --regauge-500: var(--indigo-500);
  --regauge-300: var(--indigo-300);
  --regauge-surface: var(--tint-indigo-10);
  --regauge-border:  var(--tint-indigo-28);

  --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--indigo-500);
  
  --grid-line: oklch(0.585 0.233 264.5 / 0.04);
  --grid-dot:  oklch(0.585 0.233 264.5 / 0.12);
  --scrim: oklch(0.060 0.018 264 / 0.78);

  
  --background: var(--navy-950);
  --foreground: var(--slate-50);
  --card: var(--navy-850);
  --card-foreground: var(--slate-50);
  --popover: var(--navy-850);
  --popover-foreground: var(--slate-50);
  --primary: var(--indigo-500);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: var(--navy-800);
  --secondary-foreground: var(--slate-300);
  --muted: var(--navy-800);
  --muted-foreground: var(--slate-400);
  --accent: var(--indigo-500);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: var(--red-500);
  --destructive-foreground: oklch(0.98 0 0);
  --border: var(--slate-700);
  --input: var(--slate-700);
  --ring: var(--indigo-500);
  --sidebar: var(--navy-850);
  --sidebar-foreground: var(--slate-50);
  --sidebar-primary: var(--indigo-500);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: var(--navy-800);
  --sidebar-accent-foreground: var(--slate-50);
  --sidebar-border: var(--slate-700);
  --sidebar-ring: var(--indigo-500);
  --chart-1: var(--indigo-500);
  --chart-2: var(--cyan-500);
  --chart-3: var(--amber-500);
  --chart-4: var(--red-500);
  --chart-5: var(--violet-500);
}


[data-theme="light"] {
  --surface-base: #ffffff;
  --surface-sunken: oklch(0.97 0.004 240);
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --surface-inset: oklch(0.97 0.004 240);
  --surface-hover: oklch(0.085 0.018 264 / 0.04);
  --surface-active: oklch(0.085 0.018 264 / 0.07);
  --glass-bg: oklch(1 0 0 / 0.72);
  --glass-border: oklch(0.085 0.018 264 / 0.10);

  --text-primary: var(--navy-950);
  --text-secondary: oklch(0.45 0.015 240);
  --text-tertiary: oklch(0.58 0.015 240);
  --text-disabled: oklch(0.72 0.010 240);
  --text-inverse: #ffffff;
  --text-accent: var(--indigo-600);
  --text-link: var(--indigo-600);
  --text-link-hover: var(--indigo-700);

  --border-subtle: oklch(0.085 0.018 264 / 0.09);
  --border-default: oklch(0.085 0.018 264 / 0.15);
  --border-strong: oklch(0.085 0.018 264 / 0.30);

  --diff-add-fg: var(--emerald-700);
  --diff-del-fg: var(--red-700);
  --diff-ctx-fg: oklch(0.40 0.015 240);
  --diff-gutter: oklch(0.65 0.010 240);

  --grid-line: oklch(0.585 0.233 264.5 / 0.07);
  --grid-dot: oklch(0.585 0.233 264.5 / 0.16);
  --scrim: oklch(0.085 0.018 264 / 0.45);
}

/* tokens/typography.css */
:root {
  
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
  
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-code: var(--font-mono);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  
  --text-hero-size: clamp(2rem, 8vw, 3.75rem);   
  --text-hero-line: 1.1;                          
  --text-hero-track: -0.03em;
  --text-h2-size: clamp(1.6rem, 5vw, 2.5rem);    
  --text-h2-line: 1.2;                            
  --text-h2-track: -0.025em;

  --text-h1-size: clamp(1.8rem, 6vw, 3rem);      
  --text-h1-line: 1.15;  --text-h1-track: -0.028em;
  --text-h3-size: clamp(1.35rem, 3.4vw, 1.75rem); 
  --text-h3-line: 1.25;  --text-h3-track: -0.02em;
  --text-h4-size: 22px;  --text-h4-line: 1.3;  --text-h4-track: -0.018em;
  --text-h5-size: 18px;  --text-h5-line: 1.4;  --text-h5-track: -0.012em;

  --text-lead-size: 19px; --text-lead-line: 1.6;
  --text-lg-size: 18px;   --text-lg-line: 1.65;
  --text-md-size: 16px;   --text-md-line: 1.6;
  --text-sm-size: 14px;   --text-sm-line: 1.55;
  --text-xs-size: 13px;   --text-xs-line: 1.45;
  --text-2xs-size: 12px;  --text-2xs-line: 1.4;

  --text-code-size: 13px; --text-code-line: 1.7; --text-code-track: 0;
  --text-code-sm-size: 12px;

  
  --text-kicker-size: 0.7rem;   
  --text-kicker-track: 0.12em;  
  --text-kicker-weight: 600;    
}

/* tokens/spacing.css */
:root {
  --space-0: 0;
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;  --space-10: 64px; --space-11: 80px; --space-12: 96px;
  --space-13: 128px; --space-14: 160px;

  
  --radius: 0.5rem;                        
  --radius-xs: 2px;
  --radius-sm: calc(var(--radius) - 4px);  
  --radius-md: calc(var(--radius) - 2px);  
  --radius-lg: var(--radius);              
  --radius-xl: calc(var(--radius) + 4px);  
  --radius-2xl: 16px;
  --radius-full: 999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  
  --container-max: 1280px;
  --container-narrow: 768px;
  --gutter: 16px;
  --gutter-sm: 24px;
  --gutter-lg: 32px;
  --section-y: var(--space-12);
  --section-y-mobile: 4rem;   

  --nav-h: 64px;              
  --scroll-offset: 4.5rem;    

  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 44px;
  --touch-min: 2.75rem;       
}

/* tokens/elevation.css */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px oklch(0.06 0.018 264 / 0.45);
  --shadow-sm: 0 2px 8px oklch(0.06 0.018 264 / 0.5);
  --shadow-md: 0 12px 32px -8px oklch(0.06 0.018 264 / 0.65);
  --shadow-lg: 0 28px 68px -20px oklch(0.06 0.018 264 / 0.8);
  --shadow-hover: 0 20px 44px -14px oklch(0.06 0.018 264 / 0.75);
  --shadow-inset: inset 0 1px 0 oklch(1 0 0 / 0.05);

  
  --shadow-glow: 0 0 40px oklch(0.585 0.233 264.5 / 0.18),
                 0 0 80px oklch(0.585 0.233 264.5 / 0.08);
  --shadow-accent: var(--shadow-glow);
}

/* tokens/motion.css */
:root {
  
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;   
  --dur-slow: 320ms;
  --dur-entrance: 500ms; 
  --stagger: 80ms;

  --lift-hover: -4px;
  --press-scale: 0.98;

  --transition-control: background-color var(--dur-fast) var(--ease-standard),
                        border-color var(--dur-fast) var(--ease-standard),
                        color var(--dur-fast) var(--ease-standard),
                        box-shadow var(--dur-fast) var(--ease-standard);
  --transition-lift: transform var(--dur-base) var(--ease-out),
                     box-shadow var(--dur-base) var(--ease-out),
                     border-color var(--dur-base) var(--ease-out);
}


@keyframes mp-fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mp-spin { to { transform: rotate(360deg); } }

@keyframes mp-shimmer { from { transform: translateX(-120%); } to { transform: translateX(220%); } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-entrance: 0ms; --stagger: 0ms; --lift-hover: 0px; --press-scale: 1; }
  *, *::before, *::after { animation: none !important; }
}

/* tokens/base.css */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

code, pre, kbd, samp {
  font-family: var(--font-code);
  font-size: var(--text-code-size);
  letter-spacing: var(--text-code-track);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); }

::selection { background: var(--indigo-500); color: #fff; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

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



* { scrollbar-width: thin; scrollbar-color: var(--slate-600) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--slate-700); border-radius: var(--radius-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--slate-600); }

/* components/components.css */
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--transition-control), transform var(--dur-instant) var(--ease-standard);
}
.mp-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mp-btn:disabled, .mp-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.mp-btn:active { transform: translateY(0.5px); }

.mp-btn--sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm-size); }
.mp-btn--md { height: var(--control-h-md); padding: 0 var(--space-4); font-size: var(--text-sm-size); }
.mp-btn--lg { height: var(--control-h-lg); min-height: var(--touch-min); padding: 0 var(--space-6); font-size: var(--text-md-size); }
.mp-btn--block { width: 100%; }

.mp-btn--primary { background: var(--indigo-500); color: var(--primary-foreground); font-weight: var(--weight-semibold); box-shadow: var(--shadow-glow); }
.mp-btn--primary:hover { background: var(--indigo-400); }
.mp-btn--primary:active { background: var(--indigo-600); }

.mp-btn--secondary { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-default); }
.mp-btn--secondary:hover { background: var(--surface-overlay); border-color: var(--border-strong); }
.mp-btn--secondary:active { background: var(--surface-active); }

.mp-btn--ghost { background: transparent; color: var(--text-secondary); }
.mp-btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.mp-btn--ghost:active { background: var(--surface-active); }

.mp-btn--danger { background: var(--red-500); color: #fff; font-weight: var(--weight-semibold); }
.mp-btn--danger:hover { background: var(--red-400); }
.mp-btn--danger:active { background: var(--red-600); }

.mp-btn--mono { font-family: var(--font-mono); font-size: var(--text-code-sm-size); letter-spacing: 0; }


.mp-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-secondary);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; padding: 0;
  transition: var(--transition-control);
}
.mp-iconbtn:hover { background: var(--surface-hover); color: var(--text-primary); }
.mp-iconbtn:active { background: var(--surface-active); }
.mp-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mp-iconbtn:disabled { opacity: 0.4; pointer-events: none; }
.mp-iconbtn--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.mp-iconbtn--md { width: var(--control-h-md); height: var(--control-h-md); }
.mp-iconbtn--lg { width: var(--control-h-lg); height: var(--control-h-lg); }
.mp-iconbtn--bordered { border-color: var(--border-default); background: var(--surface-raised); }
.mp-iconbtn--bordered:hover { border-color: var(--border-strong); background: var(--surface-overlay); }


.mp-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-code-sm-size);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  white-space: nowrap;
}
.mp-badge--neutral { background: var(--surface-inset); color: var(--text-secondary); border-color: var(--border-subtle); }
.mp-badge--accent  { background: var(--surface-accent); color: var(--indigo-300); border-color: var(--tint-indigo-28); }
.mp-badge--danger  { background: var(--surface-danger); color: var(--red-300); border-color: var(--tint-red-28); }
.mp-badge--warn    { background: var(--surface-warn); color: var(--amber-300); border-color: var(--tint-amber-28); }
.mp-badge--info    { background: var(--tint-cyan-10); color: var(--cyan-300); border-color: var(--tint-cyan-28); }
.mp-badge--merge   { background: var(--tint-violet-12); color: var(--violet-300); border-color: var(--tint-violet-30); }
.mp-badge--solid   { background: var(--indigo-500); color: #fff; border-color: transparent; }
.mp-badge--outline { background: transparent; color: var(--text-secondary); border-color: var(--border-default); }


.mp-status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-xs-size);
  font-weight: var(--weight-medium); line-height: 1;
  padding: 5px 10px 5px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--surface-inset);
  color: var(--text-secondary);
  white-space: nowrap;
}
.mp-status__dot { width: 6px; height: 6px; border-radius: var(--radius-full); flex: none; }
.mp-status--open    { color: var(--emerald-300); border-color: var(--tint-emerald-30); background: var(--tint-emerald-10); }
.mp-status--merged  { color: var(--violet-300); border-color: var(--tint-violet-30); background: var(--tint-violet-12); }
.mp-status--failing { color: var(--red-300); border-color: var(--tint-red-28); background: var(--surface-danger); }
.mp-status--pending { color: var(--amber-300); border-color: var(--tint-amber-28); background: var(--surface-warn); }
.mp-status--draft   { color: var(--text-tertiary); }
.mp-status--pulse .mp-status__dot { animation: mp-caret 1.4s var(--ease-standard) infinite; }


.mp-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: var(--transition-lift), background-color var(--dur-base) var(--ease-out);
}
.mp-card--flat { background: transparent; }
.mp-card--inset { background: var(--surface-sunken); }
.mp-card--raised { box-shadow: var(--shadow-md); }
.mp-card--interactive { cursor: pointer; }
.mp-card--interactive:hover { border-color: var(--border-strong); background: var(--surface-overlay); transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-hover); }
.mp-card--accent { border-color: var(--tint-indigo-35); }
.mp-card__kicker { margin-bottom: var(--space-3); }
.mp-card__title { font-size: var(--text-h3-size); line-height: var(--text-h3-line); letter-spacing: var(--text-h3-track); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.mp-card__body { font-size: var(--text-sm-size); line-height: 1.6; color: var(--text-secondary); }
.mp-card__footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-3); }


.mp-field { display: flex; flex-direction: column; gap: var(--space-2); }
.mp-field__label { font-size: var(--text-sm-size); font-weight: var(--weight-medium); color: var(--text-secondary); }
.mp-field__hint { font-size: var(--text-xs-size); color: var(--text-tertiary); }
.mp-field__error { font-size: var(--text-xs-size); color: var(--text-danger); font-family: var(--font-mono); }

.mp-input {
  height: var(--control-h-md);
  width: 100%;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm-size);
  padding: 0 var(--space-3);
  transition: var(--transition-control);
}
.mp-input::placeholder { color: var(--text-disabled); }
.mp-input:hover { border-color: var(--border-strong); }
.mp-input:focus { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 3px var(--tint-indigo-16); }
.mp-input:disabled { opacity: 0.45; cursor: not-allowed; }
.mp-input--mono { font-family: var(--font-mono); font-size: var(--text-code-sm-size); }
.mp-input--invalid { border-color: var(--red-500); }
.mp-input--invalid:focus { border-color: var(--red-500); box-shadow: 0 0 0 3px var(--tint-red-18); }
.mp-input--lg { height: var(--control-h-lg); font-size: var(--text-md-size); padding: 0 var(--space-4); }
textarea.mp-input { height: auto; padding: var(--space-3); line-height: 1.6; resize: vertical; }

.mp-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.mp-input-wrap__icon { position: absolute; left: var(--space-3); display: flex; color: var(--text-tertiary); pointer-events: none; }
.mp-input-wrap--has-icon .mp-input { padding-left: 34px; }


.mp-select {
  height: var(--control-h-md); width: 100%;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans); font-size: var(--text-sm-size);
  padding: 0 30px 0 var(--space-3);
  appearance: none; cursor: pointer;
  transition: var(--transition-control);
}
.mp-select:hover { border-color: var(--border-strong); }
.mp-select:focus { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 3px var(--tint-indigo-16); }
.mp-select-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
.mp-select-wrap__caret { position: absolute; right: var(--space-3); pointer-events: none; color: var(--text-tertiary); display: flex; }


.mp-check { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm-size); color: var(--text-secondary); }
.mp-check__box {
  width: 16px; height: 16px; flex: none; margin-top: 1px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-control);
}
.mp-check:hover .mp-check__box { border-color: var(--indigo-500); }
.mp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.mp-check input:focus-visible + .mp-check__box { box-shadow: var(--focus-ring); }
.mp-check--checked .mp-check__box { background: var(--indigo-500); border-color: var(--indigo-500); color: #fff; }
.mp-check--disabled { opacity: 0.4; pointer-events: none; }


.mp-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm-size); color: var(--text-secondary); }
.mp-switch__track {
  width: 34px; height: 20px; flex: none; border-radius: var(--radius-full);
  background: var(--slate-600); border: 1px solid var(--border-default);
  padding: 2px; display: flex; align-items: center;
  transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.mp-switch__thumb {
  width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--slate-200);
  transition: transform var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.mp-switch--on .mp-switch__track { background: var(--indigo-600); border-color: var(--indigo-500); }
.mp-switch--on .mp-switch__thumb { transform: translateX(14px); background: #fff; }
.mp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mp-switch input:focus-visible + .mp-switch__track { box-shadow: var(--focus-ring); }
.mp-switch--disabled { opacity: 0.4; pointer-events: none; }


.mp-dialog-backdrop {
  position: fixed; inset: 0; background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); z-index: 60;
  animation: mp-fade-up var(--dur-base) var(--ease-out);
}
.mp-dialog {
  width: 100%; max-width: 520px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mp-dialog__head { padding: var(--space-6) var(--space-6) var(--space-4); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.mp-dialog__title { font-size: var(--text-h3-size); font-weight: var(--weight-semibold); letter-spacing: var(--text-h3-track); }
.mp-dialog__body { padding: 0 var(--space-6) var(--space-6); font-size: var(--text-sm-size); line-height: 1.65; color: var(--text-secondary); }
.mp-dialog__actions { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); background: var(--surface-raised); display: flex; justify-content: flex-end; gap: var(--space-3); }


.mp-toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  width: 100%; max-width: 400px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-left: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  animation: mp-fade-up var(--dur-base) var(--ease-out);
}
.mp-toast--success { border-left-color: var(--emerald-500); }
.mp-toast--error { border-left-color: var(--red-500); }
.mp-toast--warn { border-left-color: var(--amber-500); }
.mp-toast--info { border-left-color: var(--cyan-500); }
.mp-toast__title { font-size: var(--text-sm-size); font-weight: var(--weight-semibold); color: var(--text-primary); }
.mp-toast__desc { font-size: var(--text-xs-size); color: var(--text-tertiary); margin-top: 3px; line-height: 1.5; }
.mp-toast__icon { flex: none; display: flex; margin-top: 1px; }


.mp-banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  font-size: var(--text-sm-size);
  line-height: 1.6;
  color: var(--text-secondary);
}
.mp-banner--danger { background: var(--surface-danger); border-color: var(--tint-red-28); }
.mp-banner--warn { background: var(--surface-warn); border-color: var(--tint-amber-28); }
.mp-banner--accent { background: var(--surface-accent); border-color: var(--tint-indigo-28); }
.mp-banner__title { color: var(--text-primary); font-weight: var(--weight-semibold); display: block; margin-bottom: 2px; }


.mp-tooltip-wrap { position: relative; display: inline-flex; }
.mp-tooltip {
  position: absolute; z-index: 50;
  background: var(--navy-1000);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-code-sm-size);
  padding: 5px 8px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  animation: mp-fade-up var(--dur-fast) var(--ease-out);
}
.mp-tooltip--top { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.mp-tooltip--bottom { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.mp-tooltip--left { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.mp-tooltip--right { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }


.mp-tabs { display: flex; align-items: stretch; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); }
.mp-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-sm-size); font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: var(--transition-control);
}
.mp-tab:hover { color: var(--text-primary); }
.mp-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mp-tab--active { color: var(--text-primary); border-bottom-color: var(--indigo-500); }
.mp-tab__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); background: var(--surface-inset); border-radius: var(--radius-xs); padding: 2px 5px; }


.mp-sidenav { display: flex; flex-direction: column; gap: 2px; }
.mp-sidenav__section { margin-bottom: var(--space-2); }
.mp-sidenav__heading { padding: var(--space-4) var(--space-3) var(--space-2); }
.mp-sidenav__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 7px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm-size); color: var(--text-secondary);
  cursor: pointer; border: 0; background: none; width: 100%; text-align: left;
  font-family: var(--font-sans);
  transition: var(--transition-control);
}
.mp-sidenav__item:hover { background: var(--surface-hover); color: var(--text-primary); }
.mp-sidenav__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mp-sidenav__item--active { background: var(--surface-active); color: var(--text-primary); font-weight: var(--weight-medium); }
.mp-sidenav__item--active .mp-sidenav__icon { color: var(--indigo-400); }
.mp-sidenav__icon { display: flex; color: var(--text-tertiary); flex: none; }
.mp-sidenav__meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }


.mp-code {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--text-code-size);
  line-height: var(--text-code-line);
}
.mp-code__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}
.mp-code__file { font-family: var(--font-mono); font-size: var(--text-code-sm-size); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); }
.mp-code__pre { margin: 0; padding: var(--space-4); overflow-x: auto; color: var(--slate-100); }
.mp-code__line { display: block; white-space: pre; }
.mp-code__ln { display: inline-block; width: 28px; color: var(--diff-gutter); user-select: none; }
.tok-key { color: var(--violet-300); }
.tok-str { color: var(--emerald-300); }
.tok-num { color: var(--amber-300); }
.tok-fn  { color: var(--cyan-300); }
.tok-com { color: var(--slate-400); font-style: italic; }
.tok-punc { color: var(--slate-200); }


.mp-diff {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-code-size);
  line-height: 1.6;
}
.mp-diff__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}
.mp-diff__path { font-size: var(--text-code-sm-size); color: var(--text-secondary); }
.mp-diff__stat { display: flex; gap: var(--space-2); font-size: var(--text-code-sm-size); }
.mp-diff__stat .add { color: var(--emerald-400); }
.mp-diff__stat .del { color: var(--red-500); }
.mp-diff__hunk { padding: var(--space-1) 0 var(--space-2); }
.mp-diff__hunkhead { padding: 2px var(--space-3); color: var(--slate-400); background: rgba(255,255,255,0.02); font-size: var(--text-code-sm-size); }
.mp-diff__row { display: flex; white-space: pre; }
.mp-diff__gutter { width: 44px; flex: none; text-align: right; padding-right: var(--space-3); color: var(--diff-gutter); user-select: none; font-size: var(--text-code-sm-size); }
.mp-diff__sign { width: 16px; flex: none; text-align: center; user-select: none; }
.mp-diff__code { flex: 1; padding-right: var(--space-3); color: var(--diff-ctx-fg); overflow-x: auto; }
.mp-diff__row--add { background: var(--diff-add-bg); box-shadow: inset 2px 0 0 var(--diff-add-bar); }
.mp-diff__row--add .mp-diff__code, .mp-diff__row--add .mp-diff__sign { color: var(--diff-add-fg); }
.mp-diff__row--del { background: var(--diff-del-bg); box-shadow: inset 2px 0 0 var(--diff-del-bar); }
.mp-diff__row--del .mp-diff__code, .mp-diff__row--del .mp-diff__sign { color: var(--diff-del-fg); }


.mp-term {
  background: var(--navy-1000);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-code-size);
  line-height: 1.7;
  color: var(--slate-200);
  overflow-x: auto;
}
.mp-term__row { display: flex; gap: var(--space-2); white-space: pre; }
.mp-term__prompt { color: var(--indigo-400); user-select: none; }
.mp-term__out { color: var(--slate-300); }
.mp-term__ok { color: var(--emerald-400); }
.mp-term__err { color: var(--red-500); }
.mp-term__warn { color: var(--amber-500); }
.mp-term__caret { display: inline-block; width: 7px; height: 15px; background: var(--indigo-400); vertical-align: -2px; animation: mp-caret 1s steps(1) infinite; }



.mp-grid-lines {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px; 
}
.mp-grid-dots {
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 28px 28px;
}

.mp-grid-mask {
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}


.mp-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}


.mp-fade-up {
  opacity: 0;
  animation: mp-fade-up var(--dur-entrance) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}


.mp-shimmer { position: relative; overflow: hidden; }
.mp-shimmer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
  transform: translateX(-120%);
}
.mp-shimmer:hover::after { animation: mp-shimmer 700ms var(--ease-out); }


.mp-kicker,
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-kicker-size);
  font-weight: var(--text-kicker-weight);
  letter-spacing: var(--text-kicker-track);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--indigo-500);
}
.mp-kicker::before,
.section-label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--indigo-500), var(--cyan-500));
  border-radius: 2px;
}
.mp-kicker--fettler { color: var(--fettler-500); }
.mp-kicker--fettler::before { background: linear-gradient(90deg, var(--cyan-500), var(--indigo-500)); }
.mp-kicker--regauge { color: var(--indigo-400); }

.mp-kicker--muted { color: var(--text-tertiary); }
.mp-kicker--muted::before { display: none; }


.mp-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-10);
  align-items: center;
}
.mp-split--reverse > :first-child { order: 2; }
@media (max-width: 900px) { .mp-split { grid-template-columns: 1fr; gap: var(--space-8); } .mp-split--reverse > :first-child { order: 0; } }

.mp-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 640px)  { .mp-container { padding: 0 var(--gutter-sm); } }
@media (min-width: 1024px) { .mp-container { padding: 0 var(--gutter-lg); } }
.mp-rule { height: 1px; background: var(--border-subtle); border: 0; }


.indigo-glow { box-shadow: var(--shadow-glow); }


.mp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.mp-nav-offset { padding-top: var(--nav-h); }


.mendpoint-grid-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.mendpoint-dot-bg {
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 28px 28px;
}