/* 原子层：所有设计值引用现有 Semantic，尺寸按真实页面基线。 */
mzh-text { display: inline; overflow-wrap: anywhere; font-size: var(--typography-body-font-size); line-height: var(--typography-body-line-height); color: var(--color-text-primary); }
mzh-text[variant="caption"] { font-size: var(--typography-caption-font-size); line-height: var(--typography-caption-line-height); }
mzh-text[variant="small"] { font-size: var(--typography-small-font-size); line-height: var(--typography-small-line-height); }
mzh-text[variant="subtitle"] { font-size: var(--typography-subtitle-font-size); line-height: var(--typography-subtitle-line-height); font-weight: var(--typography-weight-medium); }
mzh-text[variant="title"] { font-size: var(--typography-title-font-size); line-height: var(--typography-title-line-height); font-weight: var(--typography-weight-medium); }
mzh-text[tone="secondary"] { color: var(--color-text-secondary); }
mzh-text[tone="tertiary"] { color: var(--color-text-tertiary); }
mzh-text[tone="brand"] { color: var(--color-text-brand); }
mzh-text[tone="inverse"] { color: var(--color-text-inverse); }
mzh-text[truncate] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
mzh-icon { display: inline-flex; }
.mzh-atom-icon { display: block; flex: none; width: var(--spacing-2xl); height: var(--spacing-2xl); object-fit: contain; }
mzh-icon[size="sm"] .mzh-atom-icon { width: var(--spacing-lg); height: var(--spacing-lg); }
mzh-icon[size="lg"] .mzh-atom-icon { width: var(--spacing-3xl); height: var(--spacing-3xl); }
mzh-image, mzh-avatar { display: block; overflow: hidden; background: var(--color-bg-thumb); color: var(--color-text-tertiary); border-radius: var(--radius-md); }
.mzh-atom-image { display: block; width: 100%; height: 100%; object-fit: cover; }
mzh-image[fit="contain"] .mzh-atom-image { object-fit: contain; }
mzh-image[data-missing]::after, mzh-avatar[data-missing]::after { content: '暂无图片'; }
.mzh-image__fallback { display: flex; align-items: center; justify-content: center; min-height: var(--control-height-md); font-size: var(--typography-caption-font-size); }
mzh-avatar { width: var(--control-height-md); height: var(--control-height-md); border-radius: var(--radius-full); }
mzh-avatar[size="sm"] { width: var(--control-height-sm); height: var(--control-height-sm); }
mzh-avatar[size="lg"] { width: var(--control-height-lg); height: var(--control-height-lg); }
mzh-icon-button { display: inline-flex; }
.mzh-atom-icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height-md); height: var(--control-height-md); background: transparent; border: 0; border-radius: var(--radius-md); color: var(--color-text-brand); cursor: pointer; }
.mzh-atom-icon-button:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.mzh-atom-icon-button[aria-pressed="true"] { background: var(--color-bg-brand-alpha-10); }
.mzh-atom-icon-button:focus-visible, .mzh-atom-input:focus-visible, .mzh-atom-choice input:focus-visible { outline: var(--border-width-strong) solid var(--color-border-brand); outline-offset: var(--spacing-xxs); }
mzh-tag, mzh-badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-xxs) var(--spacing-xs); border-radius: var(--radius-sm); background: var(--color-bg-brand-alpha-10); color: var(--color-text-brand); font-size: var(--typography-small-font-size); line-height: var(--typography-small-line-height); overflow-wrap: anywhere; }
mzh-badge { border-radius: var(--radius-full); }
mzh-tag[tone="neutral"], mzh-badge[tone="neutral"] { background: var(--color-bg-secondary); color: var(--color-text-tertiary); }
mzh-divider { display: block; width: 100%; border-top: var(--border-width-default) solid var(--color-border-light); }
mzh-input { display: block; min-width: 0; }
.mzh-atom-input { width: 100%; height: var(--control-height-md); padding: 0 var(--control-padding-x-md); border: var(--border-width-default) solid var(--color-border-default); border-radius: var(--radius-md); font-family: inherit; font-size: var(--typography-body-font-size); color: var(--color-text-primary); background: var(--color-bg-primary); }
.mzh-atom-input[aria-invalid="true"] { border-color: var(--color-border-error); }
.mzh-atom-input:disabled, .mzh-atom-choice:has(input:disabled) { opacity: var(--opacity-disabled); }
mzh-choice { display: inline-flex; }
.mzh-atom-choice { display: inline-flex; align-items: center; gap: var(--spacing-sm); font-size: var(--typography-body-font-size); line-height: var(--typography-body-line-height); overflow-wrap: anywhere; }
.mzh-atom-choice input { accent-color: var(--color-bg-brand); }

mzh-icon[size="xl"] .mzh-atom-icon { width: var(--icon-xl-size); height: var(--icon-xl-size); }
mzh-divider[src] { position: relative; height: 0; border: 0; }
mzh-divider[src] img { position: absolute; bottom: 0; display: block; }

mzh-icon-button[size="sm"] .mzh-atom-icon-button { width: var(--spacing-2xl); height: var(--spacing-2xl); padding: 0; }