@import url("/plugins/system.css");

body { min-height: 100dvh; background: #111212; color: #eeeeeb; }
.shell { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.site-header { height: 64px; border-bottom: 1px solid #ffffff0c; }
.navigation { height: 100%; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 650; letter-spacing: -.6px; text-decoration: none; }
.brand-mark { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #ffffff38; border-radius: 7px; font-size: 17px; font-weight: 500; }
.brand-mark > span { position: absolute; top: -6px; right: -4px; padding: 0 1px; background: #111212; font-size: 13px; }
.navigation h1 { margin: 0; color: #b0b2b0; font-size: 13px; font-weight: 450; }
.navigation h1 > span { color: #777b78; }
.navigation h1 > span:first-child { padding-inline: 7px; }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-left: auto; padding: 7px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #a5aaa6; font-size: 12px; cursor: pointer; }
.motion-toggle:hover { background: #ffffff07; border-color: #ffffff15; color: #eee; }
#motionIcon { width: 12px; font-size: 11px; text-align: center; }
.gallery-main { padding-block: 24px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plugin-card { min-width: 0; overflow: hidden; border: 1px solid #ffffff15; border-radius: 12px; background: #191a1a; transition: border-color 180ms ease, background 180ms ease; }
.plugin-card:not(.card-placeholder):hover, .plugin-card:focus-within { border-color: #ffffff42; background: #202222; }
.card-link { display: block; text-decoration: none; }
.card-link:focus-visible { outline-offset: -3px; border-radius: 12px; }
.card-visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #242626; }
.card-poster, .card-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.card-video { opacity: 0; pointer-events: none; transition: opacity 150ms ease; }
.is-playing .card-video { opacity: 1; }
.card-number { position: absolute; top: 15px; left: 17px; z-index: 2; color: #fff; font: 11px/1 var(--ntd-font-mono); letter-spacing: .05em; text-shadow: 0 1px 8px #000; opacity: .8; }
.card-preview-mark { position: absolute; right: 14px; bottom: 13px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #ffffff3d; border-radius: 50%; background: #0005; color: white; font-size: 9px; opacity: 0; transition: opacity 150ms; }
.plugin-card:hover .card-preview-mark, .plugin-card:focus-within .card-preview-mark, .is-playing .card-preview-mark { opacity: 1; }
.card-caption { display: flex; align-items: center; gap: 10px; height: 44px; padding-inline: 14px; }
.card-title { margin: 0; color: #eeeeeb; font-size: 14px; font-weight: 550; letter-spacing: -.45px; }
.card-kind { color: #969b97; font-size: 11px; }
.card-arrow { margin-left: auto; color: #a1a5a2; font-size: 19px; transition: transform 180ms; }
.card-link:hover .card-arrow { transform: translateX(3px); color: #fff; }
.card-unavailable .card-poster { opacity: .35; filter: grayscale(1); }
.card-state { position: absolute; inset: 0; display: grid; place-items: center; color: #ddd; font-size: 13px; }
.card-placeholder { border-style: dashed; background: #151717; }
.card-placeholder .card-visual { display: grid; place-items: center; background: radial-gradient(ellipse at center, #202323, #171919); }
.card-placeholder .card-number { color: #757d78; text-shadow: none; }
.card-placeholder .card-kind { color: #7e8881; font-size: 11px; }
.card-wait { color: #87938b; font: 22px/1 var(--ntd-font-mono); letter-spacing: .12em; }
.empty-state { grid-column: 1 / -1; padding: 100px 20px; text-align: center; }
.empty-state h2 { font-size: 22px; font-weight: 500; }
.empty-state p { color: #a0a5a1; font-size: 14px; }
.skeleton { aspect-ratio: 288 / 206; background: #1a1c1b; }
@media (max-width: 979px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .shell { width: calc(100% - 32px); }
  .navigation { gap: 22px; }
  .navigation h1 span { display: none; }
  .gallery-main { padding-block: 16px 24px; }
  .card-grid { gap: 12px; }
  .card-caption { height: 44px; padding-inline: 10px; gap: 6px; }
  .card-title { font-size: 12px; }
  .card-preview-mark { opacity: .75; }
  .motion-toggle { padding-inline: 6px; font-size: 11px; }
}
@media (max-width: 479px) { .card-caption .card-kind { display: none; } .card-placeholder .card-kind { display: inline; } .card-arrow { font-size: 15px; } }
@media (max-width: 359px) { .navigation { gap: 16px; } .card-title { font-size: 10px; } }