.mapping-page { width: 100%; max-width: none; margin: 0; padding: 1rem; box-sizing: border-box; }
.mapping-page .mapping-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem; background: white; border: 1px solid #e5e7eb; border-left: 4px solid var(--mud-palette-primary); border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.mapping-page .mapping-heading { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.mapping-page .mapping-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--mud-palette-primary); }
.mapping-page h1 { color: #111827; font-size: 1.5rem; line-height: 2rem; font-weight: 600; margin: 0 0 0.25rem; }
.mapping-page .mapping-heading p { color: #6b7280; font-size: 0.875rem; margin: 0; }
.mapping-page .mapping-panel { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(15,23,42,.04); }
.mapping-page .mapping-toolbar { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; align-items: center; gap: 16px; padding: 20px 24px 8px; }
.mapping-page .mapping-search { display: flex; align-items: center; gap: 12px; padding: 0 24px 20px; }
.mapping-page .mapping-search .mud-input-control { max-width: 520px; flex: 1; }
.mapping-page .mapping-table th { background: var(--mud-palette-background-grey); font-weight: 700; padding-top: 16px; padding-bottom: 16px; }
.mapping-page .mapping-table td { padding-top: 14px; padding-bottom: 14px; }
.mapping-page .mapping-code { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; font-weight: 600; }
.mapping-page .mapping-target { font-weight: 600; color: var(--mud-palette-primary); }
.mapping-page .mapping-description { display: block; max-width: 320px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--mud-palette-text-secondary); }
.mapping-page .mapping-actions { display: flex; gap: 6px; }
.mapping-page .mapping-empty { display: grid; place-items: center; gap: 12px; padding: 50px 20px; color: var(--mud-palette-text-secondary); }
.mapping-page .mapping-footnote { color: var(--mud-palette-text-secondary); font-size: .8rem; margin: 16px 4px; }
@media (max-width: 900px) { .mapping-page .mapping-toolbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .mapping-page { padding: 0.75rem; } .mapping-page .mapping-header { align-items: flex-start; flex-direction: column; gap: 0.75rem; } }
@media (max-width: 600px) { .mapping-page .mapping-toolbar { grid-template-columns: 1fr; padding: 16px; } .mapping-page .mapping-search { padding: 0 16px 16px; } }