/* ============================================================
   M50.Infra.UI.Razor — Estilos Base (Tema Default M50)
   ============================================================ */

:root {
    /* Cores (alinhado a M50DefaultTheme) */
    --m50ui-primary: #00e5ff;
    --m50ui-secondary: #7c4dff;
    --m50ui-success: #22c55e;
    --m50ui-warning: #f59e0b;
    --m50ui-danger: #ef4444;
    --m50ui-info: #3b82f6;
    /* texto sobre as cores de estado (selo, botão): os tons de estado são claros/médios em quase todos os temas — branco dá
       1,7–3,7:1; texto escuro dá ≥ 5:1 (DS §15.3). Tema com estado escuro troca por branco (ex.: melon, info). */
    --m50ui-on-success: #0b1220;
    --m50ui-on-info: #0b1220;
    --m50ui-on-danger: #0b1220;
    --m50ui-neutral: #64748b;
    --m50ui-bg: #0a0e1a;
    --m50ui-surface: #11182b;
    --m50ui-on-primary: #001218;
    --m50ui-on-secondary: #ffffff;
    --m50ui-on-bg: #e2e8f0;
    --m50ui-on-surface: #cbd5e1;
    --m50ui-border: #1f2937;
    --m50ui-focus-ring: #00e5ff;

    /* Tipografia — compacta com a densidade (curva suave).
       O fator --m50-density-font vem do density.css da plataforma; fora dela
       (ex. Maui standalone) o fallback 1 preserva o tamanho atual. */
    --m50ui-font: 'Outfit', system-ui, -apple-system, sans-serif;
    --m50ui-fs-xs: max(12px, calc(12px * var(--m50-density-font, 1)));   /* nunca abaixo de 12px, nem no Compacto (DS §5) */
    --m50ui-fs-sm: calc(14px * var(--m50-density-font, 1));
    --m50ui-fs-md: calc(16px * var(--m50-density-font, 1));
    --m50ui-fs-lg: calc(18px * var(--m50-density-font, 1));
    --m50ui-fs-xl: calc(20px * var(--m50-density-font, 1));
    --m50ui-fs-2xl: calc(24px * var(--m50-density-font, 1));
    --m50ui-fs-3xl: calc(32px * var(--m50-density-font, 1));
    --m50ui-fw-regular: 400;
    --m50ui-fw-medium: 500;
    --m50ui-fw-semibold: 600;
    --m50ui-fw-bold: 700;

    /* Espaçamento — compacta com a densidade */
    --m50ui-sp-xs: calc(4px * var(--m50-density-space, 1));
    --m50ui-sp-sm: calc(8px * var(--m50-density-space, 1));
    --m50ui-sp-md: calc(12px * var(--m50-density-space, 1));
    --m50ui-sp-lg: calc(16px * var(--m50-density-space, 1));
    --m50ui-sp-xl: calc(24px * var(--m50-density-space, 1));
    --m50ui-sp-2xl: calc(32px * var(--m50-density-space, 1));
    --m50ui-sp-3xl: calc(48px * var(--m50-density-space, 1));

    /* Radius (constante — identidade visual) */
    --m50ui-r-sm: 4px;
    --m50ui-r-md: 8px;
    --m50ui-r-lg: 12px;

    /* Sombras */
    --m50ui-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.08);
    --m50ui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --m50ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.12);

    /* Touch targets — altura dos controles compacta com a densidade.
       As media queries de mobile/tablet (no fim do arquivo) restauram alvos
       acessíveis no toque, então a compactação age sobretudo no desktop. */
    --m50ui-touch-desktop: calc(32px * var(--m50-density-space, 1));
    --m50ui-touch-tablet: 40px;
    --m50ui-touch-mobile: 44px;

    /* Unidade base de densidade p/ px discretos dos controles (checkbox,
       switch, avatar, spinner, etc.). Atalhos locais p/ não repetir o calc. */
    --m50ui-ds: var(--m50-density-space, 1);
    --m50ui-df: var(--m50-density-font, 1);
}

/* ============================================================
   Utilitários
   ============================================================ */
.m50-hidden { display: none !important; }

/* ============================================================
   Field — Wrapper de campo
   ============================================================ */
.m50-field {
    display: flex;
    flex-direction: column;
    gap: var(--m50ui-sp-xs);
    font-family: var(--m50ui-font);
}

.m50-field--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--m50ui-sp-sm);
}

.m50-field__label {
    font-size: var(--m50ui-fs-sm);
    font-weight: var(--m50ui-fw-medium);
    color: var(--m50ui-on-bg);
}

.m50-field__required {
    color: var(--m50ui-danger);
    margin-left: 2px;
}

.m50-field__help {
    font-size: var(--m50ui-fs-xs);
    color: var(--m50ui-on-surface);
}

/* ============================================================
   Input
   ============================================================ */
.m50-input {
    background: var(--m50ui-surface);
    color: var(--m50ui-on-surface);
    border: 1px solid var(--m50ui-border);
    border-radius: var(--m50ui-r-md);
    padding: calc(8px * var(--m50ui-ds)) calc(12px * var(--m50ui-ds));
    font: inherit;
    font-size: var(--m50ui-fs-md);
    min-height: var(--m50ui-touch-desktop);
    transition: border-color 150ms, box-shadow 150ms;
    width: 100%;
}

.m50-input:focus {
    outline: none;
    border-color: var(--m50ui-focus-ring);
    box-shadow: 0 0 0 3px rgb(0 229 255 / 0.15);
}

.m50-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.m50-textarea {
    resize: vertical;
    min-height: calc(80px * var(--m50ui-ds));
}

.m50-input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--m50ui-surface);
    border: 1px solid var(--m50ui-border);
    border-radius: var(--m50ui-r-md);
}

.m50-input-group > .m50-input {
    border: none;
    background: transparent;
    min-width: 0;
    flex: 1;
}

.m50-input-group > .m50-input:focus { box-shadow: none; }
.m50-input-group:focus-within {
    border-color: var(--m50ui-focus-ring);
    box-shadow: 0 0 0 3px rgb(0 229 255 / 0.15);
}

.m50-input-prefix,
.m50-input-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 calc(12px * var(--m50ui-ds));
    color: var(--m50ui-on-surface);
    font-size: var(--m50ui-fs-sm);
}

.m50-input-prefix { border-right: 1px solid var(--m50ui-border); }
.m50-input-suffix { border-left: 1px solid var(--m50ui-border); }

/* ============================================================
   Checkbox / Switch
   ============================================================ */
.m50-checkbox-label,
.m50-switch-label {
    display: inline-flex;
    align-items: center;
    gap: var(--m50ui-sp-sm);
    cursor: pointer;
    color: var(--m50ui-on-bg);
}

.m50-checkbox {
    width: calc(18px * var(--m50ui-ds));
    height: calc(18px * var(--m50ui-ds));
    accent-color: var(--m50ui-primary);
}

.m50-switch {
    position: relative;
    display: inline-block;
    width: calc(36px * var(--m50ui-ds));
    height: calc(20px * var(--m50ui-ds));
    background: var(--m50ui-border);
    border-radius: 999px;
    transition: background 150ms;
}

.m50-switch--on { background: var(--m50ui-primary); }

.m50-switch__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.m50-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(16px * var(--m50ui-ds));
    height: calc(16px * var(--m50ui-ds));
    background: #fff;
    border-radius: 50%;
    transition: transform 150ms;
}

.m50-switch--on .m50-switch__thumb { transform: translateX(calc(16px * var(--m50ui-ds))); }

/* ============================================================
   Button
   ============================================================ */
.m50-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m50ui-sp-sm);
    font-family: var(--m50ui-font);
    font-weight: var(--m50ui-fw-semibold);
    border-radius: var(--m50ui-r-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 150ms, border-color 150ms, opacity 150ms;
    min-height: var(--m50ui-touch-desktop);
    padding: calc(6px * var(--m50ui-ds)) calc(14px * var(--m50ui-ds));
    font-size: var(--m50ui-fs-sm);
}

.m50-button:disabled { opacity: 0.55; cursor: not-allowed; }
.m50-button:focus-visible { outline: 2px solid var(--m50ui-focus-ring); outline-offset: 2px; }

.m50-button--primary    { background: var(--m50ui-primary); color: var(--m50ui-on-primary); }
.m50-button--primary:hover:not(:disabled)    { filter: brightness(1.1); }
.m50-button--secondary  { background: var(--m50ui-secondary); color: var(--m50ui-on-secondary); }
.m50-button--danger     { background: var(--m50ui-danger); color: var(--m50ui-on-danger); }
.m50-button--success    { background: var(--m50ui-success); color: var(--m50ui-on-success); }
.m50-button--warning    { background: var(--m50ui-warning); color: #000; }
.m50-button--ghost      { background: transparent; color: var(--m50ui-on-bg); border-color: var(--m50ui-border); }
.m50-button--ghost:hover:not(:disabled) { background: rgb(255 255 255 / 0.05); }
.m50-button--link       { background: transparent; color: var(--m50ui-accent-text); padding: 0; min-height: 0; } /* --m50ui-primary é superfície, não texto */
.m50-button--link:hover { text-decoration: underline; }

.m50-button--small      { font-size: var(--m50ui-fs-xs); padding: calc(4px * var(--m50ui-ds)) calc(10px * var(--m50ui-ds)); }
.m50-button--medium     { font-size: var(--m50ui-fs-sm); padding: calc(6px * var(--m50ui-ds)) calc(14px * var(--m50ui-ds)); }
.m50-button--large      { font-size: var(--m50ui-fs-md); padding: calc(10px * var(--m50ui-ds)) calc(18px * var(--m50ui-ds)); }
.m50-button--extralarge { font-size: var(--m50ui-fs-lg); padding: calc(12px * var(--m50ui-ds)) calc(22px * var(--m50ui-ds)); }

.m50-button--full { width: 100%; }
.m50-button--loading { pointer-events: none; }

/* IconButton */
.m50-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--m50ui-touch-desktop);
    height: var(--m50ui-touch-desktop);
    border: 1px solid transparent;
    border-radius: var(--m50ui-r-md);
    background: transparent;
    color: var(--m50ui-on-bg);
    cursor: pointer;
    transition: background 150ms;
}

.m50-icon-button:hover:not(:disabled) { background: rgb(255 255 255 / 0.05); }
.m50-icon-button--ghost { border-color: var(--m50ui-border); }
.m50-icon-button--primary { background: var(--m50ui-primary); color: var(--m50ui-on-primary); }
.m50-icon-button--small { width: calc(28px * var(--m50ui-ds)); height: calc(28px * var(--m50ui-ds)); font-size: var(--m50ui-fs-sm); }
.m50-icon-button--large { width: calc(44px * var(--m50ui-ds)); height: calc(44px * var(--m50ui-ds)); font-size: var(--m50ui-fs-lg); }

/* ============================================================
   Display
   ============================================================ */
.m50-label {
    color: var(--m50ui-on-bg);
    font-family: var(--m50ui-font);
}
.m50-label--small      { font-size: var(--m50ui-fs-xs); }
.m50-label--medium     { font-size: var(--m50ui-fs-sm); }
.m50-label--large      { font-size: var(--m50ui-fs-md); }
.m50-label--extralarge { font-size: var(--m50ui-fs-lg); }

.m50-heading h1,
.m50-heading h2,
.m50-heading h3,
.m50-heading h4,
.m50-heading h5,
.m50-heading h6 {
    color: var(--m50ui-on-bg);
    font-family: var(--m50ui-font);
    margin: 0 0 var(--m50ui-sp-md);
    line-height: 1.2;
}

.m50-heading--h1 h1 { font-size: var(--m50ui-fs-3xl); font-weight: var(--m50ui-fw-bold); }
.m50-heading--h2 h2 { font-size: var(--m50ui-fs-2xl); font-weight: var(--m50ui-fw-bold); }
.m50-heading--h3 h3 { font-size: var(--m50ui-fs-xl);  font-weight: var(--m50ui-fw-semibold); }
.m50-heading--h4 h4 { font-size: var(--m50ui-fs-lg);  font-weight: var(--m50ui-fw-semibold); }
.m50-heading--h5 h5 { font-size: var(--m50ui-fs-md);  font-weight: var(--m50ui-fw-semibold); }
.m50-heading--h6 h6 { font-size: var(--m50ui-fs-sm);  font-weight: var(--m50ui-fw-semibold); }

.m50-paragraph {
    color: var(--m50ui-on-surface);
    font-family: var(--m50ui-font);
    font-size: var(--m50ui-fs-md);
    line-height: 1.6;
    margin: 0 0 var(--m50ui-sp-md);
}

.m50-badge {
    display: inline-flex;
    align-items: center;
    padding: calc(2px * var(--m50ui-ds)) calc(10px * var(--m50ui-ds));
    border-radius: 999px;
    font-size: var(--m50ui-fs-xs);
    font-weight: var(--m50ui-fw-semibold);
    background: var(--m50ui-border);
    color: var(--m50ui-on-bg);
}
.m50-badge--primary   { background: var(--m50ui-primary); color: var(--m50ui-on-primary); }
.m50-badge--secondary { background: var(--m50ui-secondary); color: var(--m50ui-on-secondary); }
.m50-badge--success   { background: var(--m50ui-success); color: var(--m50ui-on-success); }
.m50-badge--warning   { background: var(--m50ui-warning); color: #000; }
.m50-badge--danger    { background: var(--m50ui-danger); color: var(--m50ui-on-danger); }
.m50-badge--info      { background: var(--m50ui-info); color: var(--m50ui-on-info); }
.m50-badge--small      { padding: calc(1px * var(--m50ui-ds)) calc(6px * var(--m50ui-ds)); font-size: var(--m50ui-fs-xs); }   /* era 10px × densidade (8,75px no Compacto): abaixo do mínimo de 12px */
.m50-badge--large      { padding: calc(4px * var(--m50ui-ds)) calc(14px * var(--m50ui-ds)); font-size: var(--m50ui-fs-sm); }

.m50-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--m50ui-secondary);
    color: #fff;
    border-radius: 50%;
    overflow: hidden;
    width: calc(40px * var(--m50ui-ds));
    height: calc(40px * var(--m50ui-ds));
    font-size: var(--m50ui-fs-sm);
    font-weight: var(--m50ui-fw-semibold);
}
.m50-avatar img { width: 100%; height: 100%; object-fit: cover; }
.m50-avatar--small { width: calc(28px * var(--m50ui-ds)); height: calc(28px * var(--m50ui-ds)); font-size: var(--m50ui-fs-xs); }
.m50-avatar--large { width: calc(56px * var(--m50ui-ds)); height: calc(56px * var(--m50ui-ds)); font-size: var(--m50ui-fs-md); }
.m50-avatar--extralarge { width: calc(80px * var(--m50ui-ds)); height: calc(80px * var(--m50ui-ds)); font-size: var(--m50ui-fs-lg); }

.m50-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.m50-icon--small      { font-size: calc(14px * var(--m50ui-df)); }
.m50-icon--medium     { font-size: calc(18px * var(--m50ui-df)); }
.m50-icon--large      { font-size: calc(24px * var(--m50ui-df)); }
.m50-icon--extralarge { font-size: calc(32px * var(--m50ui-df)); }

.m50-image { max-width: 100%; height: auto; border-radius: var(--m50ui-r-sm); }
.m50-image--cover  { object-fit: cover; }
.m50-image--contain{ object-fit: contain; }
.m50-image--fill   { object-fit: fill; }
.m50-image--scaledown { object-fit: scale-down; }

/* ============================================================
   Progress
   ============================================================ */
.m50-progress { display: inline-flex; flex-direction: column; gap: var(--m50ui-sp-xs); width: 100%; }
.m50-progress__track {
    width: 100%;
    height: calc(8px * var(--m50ui-ds));
    background: var(--m50ui-border);
    border-radius: 999px;
    overflow: hidden;
}
.m50-progress__bar {
    height: 100%;
    background: var(--m50ui-primary);
    transition: width 250ms;
}
.m50-progress--success .m50-progress__bar { background: var(--m50ui-success); }
.m50-progress--warning .m50-progress__bar { background: var(--m50ui-warning); }
.m50-progress--danger  .m50-progress__bar { background: var(--m50ui-danger); }

.m50-progress--indeterminate .m50-progress__bar {
    width: 30% !important;
    animation: m50-progress-indeterminate 1.5s infinite linear;
}

@keyframes m50-progress-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.m50-progress__circle { width: calc(60px * var(--m50ui-ds)); height: calc(60px * var(--m50ui-ds)); }
.m50-progress__circle-track { stroke: var(--m50ui-border); }
.m50-progress__circle-bar   { stroke: var(--m50ui-primary); transition: stroke-dasharray 250ms; }
.m50-progress__label { font-size: var(--m50ui-fs-xs); color: var(--m50ui-on-surface); }

/* ============================================================
   Layout — Card / Section / Panel / Stack / Grid
   ============================================================ */
.m50-card {
    background: var(--m50ui-surface);
    border: 1px solid var(--m50ui-border);
    border-radius: var(--m50ui-r-lg);
    padding: var(--m50ui-sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--m50ui-sp-md);
    box-shadow: var(--m50ui-shadow-sm);
}
.m50-card__header { display: flex; align-items: center; justify-content: space-between; }
.m50-card__title  { margin: 0; font-size: var(--m50ui-fs-lg); font-weight: var(--m50ui-fw-semibold); color: var(--m50ui-on-bg); }
.m50-card__body   { display: flex; flex-direction: column; gap: var(--m50ui-sp-md); }
.m50-card__footer { border-top: 1px solid var(--m50ui-border); padding-top: var(--m50ui-sp-md); }

.m50-section { display: flex; flex-direction: column; gap: var(--m50ui-sp-md); margin-bottom: var(--m50ui-sp-xl); }
.m50-section__header { display: flex; flex-direction: column; gap: var(--m50ui-sp-xs); }
.m50-section__title  { margin: 0; font-size: var(--m50ui-fs-2xl); font-weight: var(--m50ui-fw-bold); color: var(--m50ui-on-bg); }
.m50-section__description { margin: 0; color: var(--m50ui-on-surface); font-size: var(--m50ui-fs-sm); }
.m50-section__body { display: flex; flex-direction: column; gap: var(--m50ui-sp-md); }

.m50-panel {
    background: var(--m50ui-surface);
    border: 1px solid var(--m50ui-border);
    border-radius: var(--m50ui-r-md);
    overflow: hidden;
}
.m50-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--m50ui-sp-md) var(--m50ui-sp-lg);
    background: rgb(255 255 255 / 0.02);
}
.m50-panel__title { margin: 0; font-size: var(--m50ui-fs-md); font-weight: var(--m50ui-fw-semibold); color: var(--m50ui-on-bg); }
.m50-panel__toggle { color: var(--m50ui-on-surface); }
.m50-panel__body { padding: var(--m50ui-sp-lg); display: flex; flex-direction: column; gap: var(--m50ui-sp-md); }

.m50-stack { display: flex; }
.m50-stack--horizontal { flex-direction: row; }
.m50-stack--vertical   { flex-direction: column; }
.m50-stack--wrap       { flex-wrap: wrap; }

.m50-grid { display: grid; }

/* ============================================================
   Feedback — Alert / Spinner / Skeleton / EmptyState
   ============================================================ */
.m50-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--m50ui-sp-md);
    padding: var(--m50ui-sp-md) var(--m50ui-sp-lg);
    border-radius: var(--m50ui-r-md);
    border: 1px solid;
    background: var(--m50ui-surface);
    color: var(--m50ui-on-bg);
}
.m50-alert__icon { font-size: var(--m50ui-fs-lg); }
.m50-alert__content { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.m50-alert__title { color: inherit; }
.m50-alert__message { color: var(--m50ui-on-surface); font-size: var(--m50ui-fs-sm); }
.m50-alert__dismiss { background: transparent; border: none; color: inherit; font-size: var(--m50ui-fs-xl); cursor: pointer; line-height: 1; }

.m50-alert--info    { border-color: var(--m50ui-info);    box-shadow: inset 4px 0 0 var(--m50ui-info); }
.m50-alert--success { border-color: var(--m50ui-success); box-shadow: inset 4px 0 0 var(--m50ui-success); }
.m50-alert--warning { border-color: var(--m50ui-warning); box-shadow: inset 4px 0 0 var(--m50ui-warning); }
.m50-alert--danger  { border-color: var(--m50ui-danger);  box-shadow: inset 4px 0 0 var(--m50ui-danger); }

.m50-spinner {
    display: inline-block;
    width: calc(24px * var(--m50ui-ds));
    height: calc(24px * var(--m50ui-ds));
    border: 2.5px solid var(--m50ui-border);
    border-top-color: var(--m50ui-primary);
    border-radius: 50%;
    animation: m50-spin 0.8s linear infinite;
}
.m50-spinner--small  { width: calc(16px * var(--m50ui-ds)); height: calc(16px * var(--m50ui-ds)); border-width: 2px; }
.m50-spinner--large  { width: calc(36px * var(--m50ui-ds)); height: calc(36px * var(--m50ui-ds)); border-width: 3px; }
.m50-spinner--sm     { width: calc(14px * var(--m50ui-ds)); height: calc(14px * var(--m50ui-ds)); border-width: 2px; }

@keyframes m50-spin { to { transform: rotate(360deg); } }

.m50-skeleton-group { display: flex; flex-direction: column; gap: var(--m50ui-sp-sm); }
.m50-skeleton {
    display: inline-block;
    background: linear-gradient(90deg, var(--m50ui-border) 25%, rgb(255 255 255 / 0.05) 50%, var(--m50ui-border) 75%);
    background-size: 200% 100%;
    animation: m50-skeleton-shimmer 1.4s linear infinite;
    border-radius: var(--m50ui-r-sm);
    height: calc(14px * var(--m50ui-ds));
    width: 100%;
}
.m50-skeleton--line   { height: calc(14px * var(--m50ui-ds)); }
.m50-skeleton--block  { height: calc(80px * var(--m50ui-ds)); }
.m50-skeleton--circle { width: calc(40px * var(--m50ui-ds)); height: calc(40px * var(--m50ui-ds)); border-radius: 50%; }

@keyframes m50-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.m50-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--m50ui-sp-2xl);
    color: var(--m50ui-on-surface);
    gap: var(--m50ui-sp-sm);
}
.m50-empty-state__icon { font-size: calc(48px * var(--m50ui-df)); opacity: 0.6; }
.m50-empty-state__title { margin: 0; color: var(--m50ui-on-bg); font-size: var(--m50ui-fs-lg); }
.m50-empty-state__description { margin: 0; font-size: var(--m50ui-fs-sm); }
.m50-empty-state__cta { margin-top: var(--m50ui-sp-md); }

/* ============================================================
   Placeholder p/ controles ainda não implementados
   ============================================================ */
.m50-control-placeholder {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--m50ui-sp-sm) var(--m50ui-sp-md);
    border: 1px dashed var(--m50ui-border);
    border-radius: var(--m50ui-r-sm);
    background: rgb(255 255 255 / 0.02);
    color: var(--m50ui-on-surface);
    font-family: var(--m50ui-font);
    font-size: var(--m50ui-fs-xs);
}
.m50-control-placeholder strong { color: var(--m50ui-on-bg); font-size: var(--m50ui-fs-sm); }

/* ============================================================
   Mobile (touch targets WCAG 2.5.5)
   ============================================================ */
@media (max-width: 600px) {
    .m50-input,
    .m50-button,
    .m50-icon-button {
        min-height: var(--m50ui-touch-mobile);
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .m50-input,
    .m50-button,
    .m50-icon-button {
        min-height: var(--m50ui-touch-tablet);
    }
}