.library-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.library-summary > div {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(16, 28, 43, .96), rgba(10, 19, 31, .98));
}
.library-summary span, .library-summary strong { display: block; }
.library-summary span { color: var(--muted); font-size: 11px; }
.library-summary strong { margin-top: 7px; font-size: 22px; }
.library-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(9, 19, 32, .82);
}
.library-filters select {
  min-height: 39px;
  border: 1px solid #2a3b50;
  border-radius: 8px;
  padding: 0 34px 0 12px;
  color: var(--text);
  background: #111c2b;
}
.filter-check { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.active-filter {
  border-radius: 99px;
  padding: 7px 10px;
  color: #8fc3ff;
  background: rgba(45, 121, 246, .12);
  font-size: 11px;
}
.library-result-head { color: var(--muted); font-size: 13px; }
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 13px;
}
.media-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(150deg, #111d2c, #0a1421);
  transition: transform .18s, border-color .18s;
}
.media-card:hover { transform: translateY(-2px); border-color: #36577a; }
.media-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: #070e18;
  cursor: pointer;
}
.media-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 150px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: var(--muted-2);
  background:
    linear-gradient(135deg, rgba(35, 74, 116, .2), transparent 55%),
    radial-gradient(circle at 70% 25%, rgba(20, 214, 155, .12), transparent 25%),
    #091321;
}
.media-placeholder span { font-size: 34px; color: #4a789f; }
.media-placeholder--detail { min-height: 370px; border-radius: 11px; }
.media-type {
  position: absolute;
  top: 9px;
  left: 9px;
  border-radius: 6px;
  padding: 4px 7px;
  color: #e6eef7;
  background: rgba(4, 10, 18, .75);
  font-size: 10px;
}
.media-card-copy { display: grid; gap: 6px; padding: 12px; }
.media-card-copy small { color: var(--muted); }
.media-title {
  min-width: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.media-flags { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.availability { display: inline-flex; width: fit-content; border-radius: 99px; padding: 5px 8px; font-size: 10px; }
.availability--online { color: #54e6ba; background: rgba(20, 214, 155, .1); }
.availability--offline { color: #ffc166; background: rgba(255, 178, 56, .1); }
.favorite-button {
  border: 0;
  color: #8090a4;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
}
.favorite-button.is-active { color: var(--amber); }
.load-more { display: flex; justify-content: center; padding: 22px; }
.media-detail-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr); gap: 18px; }
.media-detail-visual {
  min-height: 370px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: #050a11;
}
.media-detail-image { max-width: 100%; max-height: 68vh; object-fit: contain; }
.media-detail-data dl { display: grid; gap: 1px; margin: 0; }
.media-detail-data dl > div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.media-detail-data dt { color: var(--muted); font-size: 12px; }
.media-detail-data dd { margin: 0; overflow-wrap: anywhere; font-size: 12px; }
.location-list { display: grid; gap: 7px; padding: 0; list-style: none; }
.location-list li {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.action-link { display: inline-flex; align-items: center; justify-content: center; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.map-viewport {
  position: relative;
  min-height: 620px;
  max-height: 72vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #06111c;
}
.map-controls {
  position: sticky;
  z-index: 8;
  top: 12px;
  left: calc(100% - 50px);
  width: 38px;
  height: 0;
  display: grid;
  gap: 6px;
}
.map-controls button {
  width: 38px;
  height: 38px;
  border: 1px solid #34516f;
  border-radius: 9px;
  color: var(--text);
  background: rgba(9, 19, 32, .92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
  cursor: pointer;
  font-size: 22px;
}
.map-world {
  position: relative;
  min-width: 880px;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 24% 42%, rgba(35, 91, 92, .55) 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 31% 68%, rgba(31, 77, 67, .5) 0 9%, transparent 9.5%),
    radial-gradient(ellipse at 52% 36%, rgba(35, 91, 92, .5) 0 8%, transparent 8.5%),
    radial-gradient(ellipse at 54% 59%, rgba(31, 77, 67, .45) 0 10%, transparent 10.5%),
    radial-gradient(ellipse at 72% 40%, rgba(35, 91, 92, .5) 0 15%, transparent 15.5%),
    radial-gradient(ellipse at 82% 68%, rgba(31, 77, 67, .45) 0 7%, transparent 7.5%),
    linear-gradient(rgba(25, 88, 116, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 88, 116, .08) 1px, transparent 1px),
    linear-gradient(145deg, #082235, #071522 70%);
  background-size: auto, auto, auto, auto, auto, auto, 44px 44px, 44px 44px, auto;
}
.continent { position: absolute; color: rgba(190, 213, 222, .34); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.continent--america { left: 22%; top: 37%; }
.continent--europe { left: 50%; top: 31%; }
.continent--africa { left: 51%; top: 55%; }
.continent--asia { left: 70%; top: 34%; }
.map-marker {
  position: absolute;
  z-index: 3;
  width: 43px;
  height: 43px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(91, 189, 255, .78);
  border-radius: 50% 50% 50% 12px;
  color: #fff;
  background: linear-gradient(145deg, #2c72e8, #13bd9c);
  box-shadow: 0 0 0 8px rgba(45, 121, 246, .12), 0 12px 24px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.map-marker:hover { z-index: 5; transform: translate(-50%, -50%) scale(1.12); }
.map-marker span { font-size: 11px; font-weight: 750; }
.map-guide { align-self: start; }
.map-guide h2 { margin-top: 0; }
.map-guide p { color: var(--muted); line-height: 1.5; }
.map-guide .text-link { display: inline-flex; margin-top: 16px; }
.real-map {
  width: 100%;
  height: min(72vh, 720px);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #071522;
}
.real-map-icon { border: 0; background: transparent; }
.real-map-icon span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(132, 219, 255, .92);
  border-radius: 50% 50% 50% 12px;
  color: #fff;
  background: linear-gradient(145deg, #2c72e8, #13bd9c);
  box-shadow: 0 0 0 7px rgba(45, 121, 246, .15), 0 12px 24px rgba(0, 0, 0, .4);
  font-size: 11px;
  font-weight: 750;
}
.real-map .leaflet-control-attribution {
  color: #526b7f;
  background: rgba(5, 13, 23, .88);
}
.real-map .leaflet-control-attribution a { color: #80bfff; }
.real-map .leaflet-control-zoom a { color: #dce8f5; background: #0d1b2b; }
.real-map .leaflet-control-zoom a:hover { background: #172b40; }
.timeline-shell { display: grid; gap: 24px; }
.timeline-year { position: relative; padding-left: 26px; }
.timeline-year::before { content: ""; position: absolute; inset: 38px auto 0 6px; width: 2px; background: linear-gradient(var(--cyan), rgba(45, 121, 246, .12)); }
.timeline-year h2 { margin: 0 0 12px; font-size: 28px; }
.timeline-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 11px; }
.timeline-month {
  min-height: 150px;
  display: grid;
  align-content: end;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 18%, rgba(20, 214, 155, .2), transparent 24%),
    linear-gradient(145deg, rgba(31, 85, 139, .32), #0b1625 70%);
  text-align: left;
  cursor: pointer;
}
.timeline-month:hover { border-color: #426b91; transform: translateY(-2px); }
.timeline-cover { color: #61adff; font-size: 30px; }
.timeline-month small { color: var(--muted); }
@media (max-width: 1050px) {
  .real-map { height: 62vh; min-height: 460px; }
  .library-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-layout, .media-detail-layout { grid-template-columns: 1fr; }
  .map-viewport { overflow-x: auto; }
}
@media (max-width: 620px) {
  .library-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-filters select,
  .library-filters .secondary-button { width: 100%; min-width: 0; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .media-card-copy { padding: 9px; }
  .media-title { font-size: 12px; }
  .media-card-copy small { font-size: 10px; }
  .map-viewport, .map-world { min-height: 460px; }
  .map-world { min-width: 700px; }
}