.map-files-panel { --map-files-line: color-mix(in srgb, var(--color-border) 72%, var(--color-surface)); border: 1px solid var(--map-files-line); border-radius: 8px; background: var(--color-surface); color: var(--color-text); overflow: hidden; }
.map-files-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 14px; }
.map-files-heading h3 { margin: 0 0 8px; font-size: 19px; }
.map-files-heading p, .map-files-summary, .map-file-info p, .map-file-info time { color: var(--color-muted); font-size: 12px; line-height: 1.6; }
.map-files-heading p { margin: 0; font-size: 13px; }
.map-files-toolbar { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 8px; }
#app .map-files-panel .button { border-radius: 6px; border-color: var(--map-files-line); }
#app .map-files-panel .button:not(.primary):not(.danger) { background: var(--color-surface-soft); color: var(--color-text); }
#app .map-files-panel .button:not(.primary):not(.danger):hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--map-files-line)); background: var(--color-surface); }
#app .map-files-panel .button.primary { border-color: var(--atlas-action-border); background: var(--atlas-action); color: var(--atlas-action-ink); }
#app .map-files-panel .button.primary:hover { background: var(--atlas-action-hover); }
.map-files-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 0 24px 18px; border-bottom: 1px solid var(--map-files-line); }
.map-files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; padding: 22px 24px; }
.map-file-card { min-width: 0; overflow: hidden; border: 1px solid var(--map-files-line); border-radius: 8px; background: var(--color-surface-soft); }
.map-file-card.is-cover { border-color: color-mix(in srgb, var(--atlas-action-border) 70%, var(--map-files-line)); }
.map-file-preview { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg); }
.map-file-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.map-file-preview > span:not(.map-file-cover-badge) { color: var(--color-muted); font-size: 12px; }
.map-file-cover-badge { position: absolute; right: 10px; bottom: 10px; padding: 5px 9px; border: 1px solid var(--atlas-action-border); border-radius: 6px; color: var(--atlas-action-ink); background: var(--atlas-action); font-size: 11px; }
.map-file-info { padding: 14px 14px 12px; }
.map-file-info h4 { margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.map-file-info p { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 2px; }
.map-file-info time { display: block; overflow-wrap: anywhere; font-size: 11px; }
.map-file-actions { display: flex; gap: 8px; padding: 0 14px 14px; }
.map-file-actions .button:first-child { flex: 1; }
.map-file-actions .button, .map-file-delete-confirm .button { min-height: 34px; font-size: 12px; }
.map-file-delete-confirm { padding: 0 14px 14px; }
.map-file-delete-confirm p { margin: 0 0 12px; overflow-wrap: anywhere; color: var(--atlas-red); font-size: 12px; line-height: 1.7; }
.map-file-delete-confirm > div { display: flex; flex-wrap: wrap; gap: 8px; }
.map-files-error { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 24px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--atlas-red) 30%, var(--map-files-line)); border-radius: 6px; color: var(--atlas-red); background: color-mix(in srgb, var(--atlas-red) 8%, var(--color-surface)); font-size: 13px; }
.map-files-error > span { flex: 1 1 180px; overflow-wrap: anywhere; line-height: 1.6; }
.map-files-message, .map-files-loading { margin: 16px 24px 0; font-size: 13px; line-height: 1.6; }
.map-files-message { color: var(--atlas-green); }
.map-files-loading { color: var(--color-muted); }
.map-files-empty { padding: 58px 24px; text-align: center; }
.map-files-empty strong { font-size: 15px; font-weight: 500; }
.map-files-empty p { margin: 10px 0 0; color: var(--color-muted); font-size: 13px; }
.map-files-panel .button:focus-visible, .map-cover-retry:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.map-cover-preview { display: block; width: 100%; max-height: 110px; object-fit: cover; border: 1px solid color-mix(in srgb, var(--color-border) 72%, var(--color-surface)); border-radius: 8px; }
.map-cover-retry { width: 100%; padding: 10px 8px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-soft); color: var(--color-text); font: inherit; font-size: 11px; cursor: pointer; }
@media (max-width: 620px) {
  .map-files-heading { flex-direction: column; gap: 16px; padding: 18px 16px 14px; }
  .map-files-toolbar { width: 100%; }
  .map-files-toolbar .button { flex: 1; }
  .map-files-summary { padding: 0 16px 16px; }
  .map-files-grid { padding: 16px; gap: 14px; }
  .map-files-error { margin-left: 16px; margin-right: 16px; }
  .map-files-message, .map-files-loading { margin-left: 16px; margin-right: 16px; }
}