.neko-carousel { width: calc(48 * var(--u)); max-width: 920px; margin: calc(5.3 * var(--u)) auto 0; border: 1px solid #e5c65555; border-radius: 22px; overflow: hidden; background: #100e0d; box-shadow: 0 18px 50px #0005; }
.neko-carousel-frame { position: relative; aspect-ratio: 1; width: 100%; touch-action: pan-y; }
.neko-carousel-slide { width: 100%; height: 100%; animation: neko-carousel-reveal .25s ease; }
.neko-carousel-slide[hidden] { display: none; }
.neko-carousel-slide img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.neko-carousel-frame[data-fit="cover"] img { object-fit: cover; }
.neko-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #fff7; border-radius: 50%; color: #fff; background: #080608b8; backdrop-filter: blur(8px); cursor: pointer; transition: background .15s; }
.neko-carousel-arrow.is-previous { left: 14px; }
.neko-carousel-arrow.is-next { right: 14px; }
.neko-carousel-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.neko-carousel-arrow:hover { color: #080608; background: #e5c655; }
.neko-carousel-controls { display: grid; grid-template-columns: 100px 1fr 70px; gap: 8px; align-items: center; min-height: 58px; padding: 8px 16px; background: #0c090d; color: #e5c655; }
.neko-carousel-play { border: 1px solid #e5c65566; border-radius: 30px; background: transparent; color: #eee5c8; font: inherit; font-size: 12px; padding: 9px 10px; min-height: 38px; cursor: pointer; }
.neko-carousel-dots { display: flex; gap: 1px; justify-content: center; flex-wrap: wrap; }
.neko-carousel-dots button { position: relative; width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.neko-carousel-dots button::after { content: ''; display: block; width: 7px; height: 7px; margin: auto; border-radius: 8px; background: #fff5; transition: width .15s, background .15s; }
.neko-carousel-dots button[aria-current="true"]::after { width: 19px; background: #e5c655; }
.neko-carousel-counter { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: #ddd3bd; }
.neko-carousel :is(button,:scope):focus-visible { outline: 3px solid #e5c655; outline-offset: -3px; }
@keyframes neko-carousel-reveal { from { opacity: .65; } to { opacity: 1; } }
@media (max-width: 900px) {
    .neko-page .neko-carousel { width: min(100%, 680px); margin-top: 24px; border-radius: 16px; }
    .neko-carousel-arrow { width: 42px; height: 42px; }
    .neko-carousel-arrow.is-previous { left: 10px; }
    .neko-carousel-arrow.is-next { right: 10px; }
    .neko-carousel-controls { grid-template-columns: 88px 1fr 48px; padding: 7px 10px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .neko-carousel-slide { animation: none; } }
.raffle-carousel-editor .carousel-editor-toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.raffle-carousel-editor .carousel-editor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin: 20px 0; }
.raffle-carousel-editor .carousel-editor-item { border: 1px solid #e1e5ed; border-radius: 16px; overflow: hidden; padding: 10px; background: #fff; }
.raffle-carousel-editor .carousel-editor-photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #f3f4f7; }
.raffle-carousel-editor .carousel-editor-photo img { width: 100%; height: 100%; object-fit: contain; }
.raffle-carousel-editor .carousel-editor-position { position: absolute; top: 8px; left: 8px; border-radius: 20px; padding: 3px 9px; background: #161221d9; color: #fff; font-size: 12px; }
.raffle-carousel-editor .carousel-editor-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.raffle-carousel-editor .carousel-editor-actions button { min-height: 36px; }
.raffle-carousel-editor .carousel-editor-empty { padding: 30px 20px; text-align: center; border: 2px dashed #dce1e9; border-radius: 16px; color: #667085; background: #f9fafb; }
.raffle-carousel-editor .carousel-editor-settings { padding: 18px; background: #f8f9fc; border-radius: 14px; margin: 18px 0; }
.raffle-carousel-editor .carousel-editor-status { min-height: 24px; }