/* Layout only. Every value is a DS token. */
.mx { width: 100%; max-width: 560px; margin: 0 auto; padding: var(--spacing-40) var(--spacing-16); display: flex; flex-direction: column; gap: var(--spacing-16); }
.mx-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); margin-bottom: var(--spacing-8); }
.mx-logo { height: var(--spacing-24); width: auto; }
.mx-logo--dark { display: none; }
[data-theme="dark"] .mx-logo--light { display: none; }
[data-theme="dark"] .mx-logo--dark { display: block; }
.mx-badge { color: var(--content-secondary); background: var(--bg-secondary); border-radius: var(--radius-pill); padding: var(--spacing-4) var(--spacing-12); }
.mx-card { display: flex; flex-direction: column; gap: var(--spacing-16); }
.mx-card form { display: flex; flex-direction: column; gap: var(--spacing-12); }
.mx-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); }
.mx-muted { color: var(--content-secondary); }
.mx-back { align-self: flex-start; gap: var(--spacing-6); }
.mx-card svg { width: var(--spacing-24); height: var(--spacing-24); flex: none; }
.pl-btn svg { width: var(--spacing-16); height: var(--spacing-16); }
.pl-btn { gap: var(--spacing-6); }
.mx-code { letter-spacing: var(--spacing-8); font-weight: var(--font-weight-semibold); }
.mx-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-8); }
.mx-fieldset legend { margin-bottom: var(--spacing-8); }
.mx-ok { color: var(--accent-success); }
.mx-ok svg { width: var(--spacing-40); height: var(--spacing-40); }
.mx-note { display: flex; gap: var(--spacing-8); align-items: flex-start; background: var(--accent-caution-light); color: var(--content-primary); border-radius: var(--radius-base); padding: var(--spacing-12) var(--spacing-16); }
.mx-field { display: flex; flex-direction: column; gap: var(--spacing-4); }
.mx-copyrow { display: flex; gap: var(--spacing-8); align-items: center; }
.mx-copyrow--top { align-items: flex-start; }
.mx-mono { flex: 1; min-width: 0; font-family: monospace; font-size: var(--font-size-sm); line-height: var(--font-line-height-sm); background: var(--bg-secondary); border-radius: var(--radius-sm); padding: var(--spacing-8) var(--spacing-12); word-break: break-all; }
.mx-pre { margin: 0; white-space: pre-wrap; }
.mx-foot { text-align: center; }
[hidden] { display: none !important; }