/* tilitili UI refinement layer — loaded after the main stylesheet */

:root {
    --content-max: 1760px;
    --card-ring: rgba(251, 114, 153, 0.22);
}

body {
    background:
        radial-gradient(900px 440px at 50% -160px, rgba(251, 114, 153, 0.10), transparent 68%),
        var(--surface-base);
}

[data-theme="light"] body {
    background:
        radial-gradient(900px 440px at 50% -160px, rgba(251, 114, 153, 0.08), transparent 68%),
        var(--surface-base);
}

#header {
    box-shadow: 0 1px 0 var(--border), 0 10px 30px rgba(10, 10, 12, 0.03);
}

#main {
    max-width: var(--content-max);
    padding-top: 32px;
    animation: content-enter 360ms var(--ease) both;
}

.section-header {
    margin-bottom: 20px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.18rem;
    font-weight: 700;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    border-radius: var(--r-full);
    background: linear-gradient(180deg, var(--accent-hover), var(--accent));
    box-shadow: 0 2px 10px var(--accent-glow);
}

.video-grid, .skeleton-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 28px 18px;
}

.video-card {
    min-width: 0;
    border-radius: calc(var(--r) + 2px);
    outline: 1px solid transparent;
    outline-offset: 4px;
}

.video-card .cover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-sm);
}

.video-card .cover::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.20) 100%);
}

.video-card:hover {
    transform: translateY(-6px);
    outline-color: var(--card-ring);
}

.video-card:hover .cover {
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
}

.video-card .play-count,
.video-card .duration {
    z-index: 1;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(9, 9, 11, 0.38);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.video-card .play-overlay {
    z-index: 2;
}

.video-card .play-overlay svg {
    width: 52px;
    height: 52px;
    padding: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.video-card .title {
    transition: color 0.2s var(--ease);
}

.video-card:hover .title {
    color: var(--accent);
}

.video-card .up {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.video-card:focus-visible,
.nav-tab:focus-visible,
.search-box:focus-within,
#themeToggle:focus-visible,
.video-actions button:focus-visible {
    outline: 3px solid var(--accent-dim);
    outline-offset: 3px;
}

.rank-item {
    border: 1px solid transparent;
}

.rank-item:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

@keyframes content-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    #main { padding-top: 24px; }
    .video-grid, .skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

@media (max-width: 680px) {
    #header {
        height: auto;
        min-height: var(--header-h);
        padding: 10px 12px;
        gap: 10px;
    }

    .header-center {
        max-width: none;
        min-width: 0;
        gap: 8px;
    }

    .search-box { min-width: 0; }
    #navTabs { padding: 2px; }
    .nav-tab { padding: 6px 8px; }
    #main { padding: 20px 12px; }
    .video-grid, .skeleton-grid { gap: 20px 10px; }
}

@media (max-width: 460px) {
    #header { align-items: center; }
    .header-center { gap: 6px; }
    .search-box input { min-width: 0; padding: 0 9px; }
    .search-box button { padding: 0 10px; }
    .nav-tab { padding: 6px 6px; font-size: 11px; }
    .video-grid, .skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-title { font-size: 1.05rem; }
}

@media (hover: none) {
    .video-card .play-overlay { opacity: 1; background: linear-gradient(180deg, transparent 54%, rgba(0, 0, 0, 0.25) 100%); }
    .video-card .play-overlay svg { width: 40px; height: 40px; padding: 10px; opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}