.npc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem; }
@media (max-width: 900px) { .npc-layout { grid-template-columns: 1fr; } }
.npc-list { display: grid; gap: .4rem; margin: .75rem 0; max-height: 16rem; overflow: auto; }
.npc-row { text-align: left; }
.npc-row[aria-pressed="true"] { outline: 2px solid #ea93a9; }
.npc-side label { display: block; margin-top: .6rem; }
.npc-side input:not([type="checkbox"]), .npc-side select, .npc-side textarea { width: 100%; box-sizing: border-box; }
.npc-pair { display: grid; grid-template-columns: 1fr 6rem auto 6rem; gap: .5rem; align-items: end; }
.npc-tools { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .75rem; }
.npc-canvas { display: block; width: 100%; max-width: 100%; height: auto; image-rendering: pixelated; cursor: crosshair; border-radius: 6px; touch-action: none; }
.npc-scroll { max-width: 100%; max-height: 70vh; overflow: auto; border-radius: 6px; overscroll-behavior: contain; }
.npc-scroll .npc-canvas { max-width: none; }
.map-zoom { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-variant-numeric: tabular-nums; }
.map-zoom button { min-width: 36px; padding-inline: 0; }
.map-zoom span { min-width: 44px; text-align: center; }