/* Every visual component is opt-in and prefixed; application behavior stays with the host. */
[data-mdh] .mdh-button {
  display: inline-flex; justify-content: center; align-items: center; gap: .6rem;
  min-height: 44px; padding: .7rem 1.05rem; border: 1px solid transparent;
  border-radius: var(--mdh-radius-sm); text-decoration: none;
  color: var(--mdh-color-on-primary); background: var(--mdh-color-primary);
  font-size: var(--mdh-type-sm); font-weight: 690; line-height: 1.3;
  transition: background var(--mdh-duration-normal) var(--mdh-ease-standard),
    border-color var(--mdh-duration-normal) var(--mdh-ease-standard),
    transform var(--mdh-duration-fast) var(--mdh-ease-standard),
    box-shadow var(--mdh-duration-normal) var(--mdh-ease-standard);
}
[data-mdh] .mdh-button:not(:disabled):hover { background: var(--mdh-color-primary-hover); transform: translateY(-1px); box-shadow: var(--mdh-shadow-sm); }
[data-mdh] .mdh-button:active { transform: translateY(0); }
[data-mdh] .mdh-button--secondary { background: var(--mdh-color-surface-raised); border-color: var(--mdh-color-border-strong); color: var(--mdh-color-text); }
[data-mdh] .mdh-button--secondary:not(:disabled):hover { background: var(--mdh-color-surface-hover); }
[data-mdh] .mdh-button--ghost { background: transparent; color: var(--mdh-color-text-muted); }
[data-mdh] .mdh-button--ghost:not(:disabled):hover { background: var(--mdh-color-surface-hover); color: var(--mdh-color-text); }
[data-mdh] .mdh-button--accent { background: var(--mdh-color-accent); color: var(--mdh-color-on-accent); }
[data-mdh] .mdh-button--accent:not(:disabled):hover { background: var(--mdh-color-accent-hover); }
[data-mdh] .mdh-button--danger { color: var(--mdh-color-danger); border-color: color-mix(in srgb,var(--mdh-color-danger) 35%,transparent); background: transparent; }
[data-mdh] .mdh-button--danger:not(:disabled):hover { background: color-mix(in srgb,var(--mdh-color-danger) 12%,transparent); }
[data-mdh] .mdh-button--sm { min-height: 36px; padding: .45rem .75rem; font-size: var(--mdh-type-xs); }
[data-mdh] .mdh-button--lg { min-height: 50px; padding: .84rem 1.4rem; font-size: var(--mdh-type-base); }
[data-mdh] .mdh-button--icon { width: 44px; padding: 0; }

[data-mdh] .mdh-card { background: var(--mdh-color-surface); border: 1px solid var(--mdh-color-border); border-radius: var(--mdh-radius-lg); padding: var(--mdh-space-6); box-shadow: var(--mdh-shadow-sm); }
[data-mdh] .mdh-card--interactive { transition: transform var(--mdh-duration-normal) var(--mdh-ease-out),border-color var(--mdh-duration-normal) var(--mdh-ease-standard),box-shadow var(--mdh-duration-normal) var(--mdh-ease-standard); }
[data-mdh] .mdh-card--interactive:hover { transform: translateY(-3px); border-color: var(--mdh-color-border-strong); box-shadow: var(--mdh-shadow-md); }
[data-mdh] .mdh-card--glass { background: var(--mdh-color-surface-glass); backdrop-filter: blur(20px); }
[data-mdh] .mdh-card--flush { padding: 0; overflow: hidden; }
[data-mdh] .mdh-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--mdh-space-4); margin-bottom: var(--mdh-space-5); }
[data-mdh] .mdh-card__title { margin: 0; font-size: var(--mdh-type-lg); font-weight: 680; }
[data-mdh] .mdh-card__description { margin: .3rem 0 0; font-size: var(--mdh-type-sm); }
[data-mdh] .mdh-card__footer { padding-top: var(--mdh-space-4); margin-top: var(--mdh-space-4); border-top: 1px solid var(--mdh-color-border); }

[data-mdh] .mdh-badge { display: inline-flex; align-items: center; gap: .45rem; width: max-content; max-width: 100%; padding: .25rem .6rem; font: 650 var(--mdh-type-xs)/1.3 var(--mdh-font-sans); border: 1px solid var(--mdh-color-border-strong); border-radius: var(--mdh-radius-pill); color: var(--mdh-color-text-muted); background: var(--mdh-color-surface-raised); }
[data-mdh] .mdh-badge--success { color: var(--mdh-color-success); border-color: color-mix(in srgb,var(--mdh-color-success) 30%,transparent); background: var(--mdh-color-accent-soft); }
[data-mdh] .mdh-badge--info { color: var(--mdh-color-primary); border-color: color-mix(in srgb,var(--mdh-color-primary) 30%,transparent); background: var(--mdh-color-primary-soft); }
[data-mdh] .mdh-badge--warning { color: var(--mdh-color-warning); border-color: color-mix(in srgb,var(--mdh-color-warning) 30%,transparent); }
[data-mdh] .mdh-badge--danger { color: var(--mdh-color-danger); border-color: color-mix(in srgb,var(--mdh-color-danger) 30%,transparent); }
[data-mdh] .mdh-dot { display: inline-block; width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: currentColor; }

[data-mdh] .mdh-field { display: grid; gap: var(--mdh-space-2); min-width: 0; }
[data-mdh] .mdh-label { color: var(--mdh-color-text); font-size: var(--mdh-type-sm); font-weight: 620; }
[data-mdh] .mdh-field__hint { margin: 0; color: var(--mdh-color-text-subtle); font-size: var(--mdh-type-xs); }
[data-mdh] .mdh-field__error { margin: 0; color: var(--mdh-color-danger); font-size: var(--mdh-type-xs); }
[data-mdh] .mdh-input { display: block; width: 100%; min-height: 46px; border: 1px solid var(--mdh-color-border-strong); border-radius: var(--mdh-radius-sm); padding: .7rem .9rem; color: var(--mdh-color-text); background: var(--mdh-color-bg-raised); font-size: var(--mdh-type-base); line-height: 1.4; transition: border-color var(--mdh-duration-fast),box-shadow var(--mdh-duration-fast); }
[data-mdh] .mdh-input::placeholder { color: var(--mdh-color-text-subtle); opacity: 1; }
[data-mdh] .mdh-input:hover { border-color: var(--mdh-color-primary); }
[data-mdh] .mdh-input:focus { border-color: var(--mdh-color-primary); box-shadow: 0 0 0 3px var(--mdh-color-primary-soft); }
[data-mdh] .mdh-input[aria-invalid="true"] { border-color: var(--mdh-color-danger); }
[data-mdh] textarea.mdh-input { resize: vertical; min-height: 110px; }
[data-mdh] .mdh-check { display: inline-flex; align-items: center; gap: var(--mdh-space-3); cursor: pointer; }
[data-mdh] .mdh-check input { width: 18px; height: 18px; accent-color: var(--mdh-color-primary); }

[data-mdh] .mdh-tabs { display: flex; gap: var(--mdh-space-1); padding: .3rem; width: max-content; max-width: 100%; overflow-x: auto; border-radius: var(--mdh-radius-md); background: var(--mdh-color-surface); border: 1px solid var(--mdh-color-border); }
[data-mdh] .mdh-tab { min-height: 38px; white-space: nowrap; padding: .45rem 1rem; background: none; border: 1px solid transparent; border-radius: var(--mdh-radius-xs); color: var(--mdh-color-text-muted); font-weight: 610; }
[data-mdh] .mdh-tab[aria-selected="true"] { color: var(--mdh-color-text); border-color: var(--mdh-color-border); background: var(--mdh-color-surface-raised); box-shadow: var(--mdh-shadow-sm); }
[data-mdh] .mdh-tab:hover { color: var(--mdh-color-text); }

[data-mdh] .mdh-stat { display: grid; gap: .25rem; }
[data-mdh] .mdh-stat__label { color: var(--mdh-color-text-muted); font-size: var(--mdh-type-sm); }
[data-mdh] .mdh-stat__value { color: var(--mdh-color-text); font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 730; line-height: 1.2; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
[data-mdh] .mdh-stat__detail { color: var(--mdh-color-text-subtle); font-size: var(--mdh-type-xs); }

[data-mdh] .mdh-alert { display: flex; gap: var(--mdh-space-3); align-items: flex-start; padding: var(--mdh-space-4); border: 1px solid var(--mdh-color-border-strong); border-radius: var(--mdh-radius-md); color: var(--mdh-color-text); background: var(--mdh-color-surface); }
[data-mdh] .mdh-alert--info { border-color: color-mix(in srgb,var(--mdh-color-info) 45%,var(--mdh-color-border)); }
[data-mdh] .mdh-alert--success { border-color: color-mix(in srgb,var(--mdh-color-success) 45%,var(--mdh-color-border)); }
[data-mdh] .mdh-alert--warning { border-color: color-mix(in srgb,var(--mdh-color-warning) 45%,var(--mdh-color-border)); }
[data-mdh] .mdh-alert--danger { border-color: color-mix(in srgb,var(--mdh-color-danger) 45%,var(--mdh-color-border)); }
[data-mdh] .mdh-alert p { margin: 0; }

[data-mdh] .mdh-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--mdh-color-border); border-radius: var(--mdh-radius-md); }
[data-mdh] .mdh-table { width: 100%; min-width: 550px; border-collapse: collapse; font-size: var(--mdh-type-sm); text-align: left; }
[data-mdh] .mdh-table th { font-weight: 620; color: var(--mdh-color-text-subtle); background: var(--mdh-color-bg-raised); }
[data-mdh] .mdh-table :where(th,td) { padding: .9rem 1rem; border-bottom: 1px solid var(--mdh-color-border); }
[data-mdh] .mdh-table tr:last-child td { border-bottom: 0; }
[data-mdh] .mdh-table tbody tr:hover { background: var(--mdh-color-surface-hover); }

[data-mdh] .mdh-progress { width: 100%; height: .5rem; overflow: hidden; appearance: none; border-radius: var(--mdh-radius-pill); background: var(--mdh-color-surface-hover); }
[data-mdh] .mdh-progress::-webkit-progress-bar { background: var(--mdh-color-surface-hover); }
[data-mdh] .mdh-progress::-webkit-progress-value { background: linear-gradient(90deg,var(--mdh-color-primary),var(--mdh-color-accent)); border-radius: inherit; }
[data-mdh] .mdh-progress::-moz-progress-bar { background: var(--mdh-color-primary); }

[data-mdh] .mdh-dropzone { display: grid; place-items: center; gap: var(--mdh-space-2); min-height: 155px; padding: var(--mdh-space-8); text-align: center; border: 1px dashed var(--mdh-color-border-strong); border-radius: var(--mdh-radius-lg); background: var(--mdh-color-bg-raised); }
[data-mdh] .mdh-dropzone:focus-within { outline: 3px solid var(--mdh-color-focus); outline-offset: 3px; }
[data-mdh] .mdh-dropzone[data-dragover="true"] { border-color: var(--mdh-color-primary); background: var(--mdh-color-primary-soft); }
[data-mdh] .mdh-empty { display: grid; justify-items: center; gap: var(--mdh-space-3); text-align: center; padding: var(--mdh-space-12) var(--mdh-space-6); }
[data-mdh] .mdh-empty p { max-width: 42ch; margin: 0; }
[data-mdh] .mdh-code { padding: var(--mdh-space-5); overflow-x: auto; border: 1px solid var(--mdh-color-border); border-radius: var(--mdh-radius-md); background: var(--mdh-color-bg); color: var(--mdh-color-text); font: .875rem/1.7 var(--mdh-font-mono); }
[data-mdh] .mdh-skeleton { display: block; min-height: 1rem; border-radius: var(--mdh-radius-xs); background: linear-gradient(100deg,var(--mdh-color-surface),var(--mdh-color-surface-hover),var(--mdh-color-surface)); background-size: 200% 100%; animation: mdh-shimmer 1.5s ease-in-out infinite; }
@keyframes mdh-shimmer { to { background-position: -200% 0; } }

[data-mdh] .mdh-toast-region { position: fixed; right: var(--mdh-space-5); bottom: var(--mdh-space-5); width: min(380px,calc(100vw - 2rem)); display: grid; gap: var(--mdh-space-3); z-index: 200; pointer-events: none; }
[data-mdh] .mdh-toast { display: flex; gap: var(--mdh-space-3); align-items: flex-start; padding: var(--mdh-space-4); border: 1px solid var(--mdh-color-border-strong); border-left: 3px solid var(--mdh-color-accent); border-radius: var(--mdh-radius-sm); color: var(--mdh-color-text); background: var(--mdh-color-surface-raised); box-shadow: var(--mdh-shadow-lg); pointer-events: auto; }
[data-mdh] .mdh-toast p { margin: 0; font-size: var(--mdh-type-sm); }
[data-mdh] .mdh-toast__dismiss { margin-left: auto; padding: 0 .35rem; border: 0; background: transparent; color: var(--mdh-color-text-muted); font-size: 1.2rem; }

[data-mdh] .mdh-dialog { width: min(460px,calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--mdh-space-8); border: 1px solid var(--mdh-color-border-strong); border-radius: var(--mdh-radius-lg); background: var(--mdh-color-surface); color: var(--mdh-color-text); box-shadow: var(--mdh-shadow-lg); }
[data-mdh] .mdh-dialog::backdrop { background: var(--mdh-color-overlay); backdrop-filter: blur(6px); }
[data-mdh] .mdh-dialog h2 { font-size: var(--mdh-type-2xl); }

@media (max-width: 600px) {
  [data-mdh] .mdh-card { padding: var(--mdh-space-5); }
  [data-mdh] .mdh-card--flush { padding: 0; }
  [data-mdh] .mdh-toast-region { right: 1rem; bottom: 1rem; }
  [data-mdh] .mdh-button { min-height: 44px; }
}