:root {
    color-scheme: dark;
    --app-bg: #0d0f14;
    --app-surface: #171a21;
    --app-surface-soft: #20242d;
    --app-text: #f5f7fb;
    --app-muted: #9097a6;
    --app-accent: #ff496c;
    --app-accent-soft: rgba(255, 73, 108, .14);
    --app-border: rgba(255, 255, 255, .08);
}

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    min-width: 320px;
    min-height: 100vh;
    background:
        radial-gradient(circle at 80% -10%, rgba(255, 73, 108, .13), transparent 30rem),
        var(--app-bg);
    color: var(--app-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.app-container {
    width: min(100%, 780px);
}

.app-header {
    background: rgba(13, 15, 20, .88);
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    color: var(--app-text);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.brand:hover {
    color: var(--app-text);
}

.brand-mark {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .7rem;
    background: linear-gradient(135deg, #ff6b7f, #e72960);
    box-shadow: 0 .45rem 1.5rem rgba(231, 41, 96, .28);
    font-size: .9rem;
}

.total-badge {
    color: var(--app-muted);
    font-size: .78rem;
}

.header-actions {
    display: flex;
    gap: .65rem;
    align-items: center;
}

.header-actions form {
    margin: 0;
}

.logout-button {
    padding: .32rem .62rem;
    border: 1px solid var(--app-border);
    border-radius: .55rem;
    background: var(--app-surface);
    color: var(--app-muted);
    font-size: .7rem;
}

.logout-button:hover,
.logout-button:focus {
    border-color: rgba(255, 73, 108, .35);
    color: #ff7892;
}

.admin-link {
    color: #ff7892;
    font-size: .7rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.search-form {
    position: relative;
    display: flex;
    gap: .5rem;
}

.search-form .form-control {
    height: 2.9rem;
    padding-left: 2.75rem;
    border: 1px solid transparent;
    border-radius: .9rem;
    background: var(--app-surface-soft);
    color: var(--app-text);
    font-size: 1rem;
}

.search-form .form-control:focus {
    border-color: rgba(255, 73, 108, .55);
    background: #242832;
    color: var(--app-text);
    box-shadow: 0 0 0 .2rem rgba(255, 73, 108, .1);
}

.search-form .form-control::placeholder {
    color: #747c8d;
}

.search-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: .95rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--app-muted);
    transform: translateY(-50%);
}

.search-icon svg,
.video-meta svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.btn-search {
    min-width: 4rem;
    border: 0;
    border-radius: .9rem;
    background: var(--app-accent);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
}

.btn-search:hover,
.btn-search:focus {
    background: #ff315d;
    color: #fff;
}

.category-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.category-pill {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .4rem;
    align-items: center;
    padding: .55rem .8rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface);
    color: #c8cdd7;
    text-decoration: none;
    font-size: .78rem;
    white-space: nowrap;
}

.category-pill span {
    color: #707888;
    font-size: .68rem;
}

.category-pill.active {
    border-color: rgba(255, 73, 108, .35);
    background: var(--app-accent-soft);
    color: #ff7c96;
}

.category-pill.active span {
    color: #db7187;
}

.eyebrow {
    display: block;
    margin-bottom: .15rem;
    color: var(--app-accent);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.section-heading h1 {
    font-weight: 800;
    letter-spacing: -.04em;
}

.reset-link {
    color: var(--app-muted);
    font-size: .76rem;
    text-decoration: none;
}

.video-card {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: .85rem;
    background: var(--app-surface);
    box-shadow: 0 .45rem 1.4rem rgba(0, 0, 0, .13);
}

.cover-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #252932;
}

.video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.lazy-image {
    opacity: .72;
    transition: opacity .25s ease, transform .3s ease;
}

.lazy-image.is-loaded {
    opacity: 1;
}

.cover-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

.video-card:hover .video-cover {
    transform: scale(1.025);
}

.cover-wrap::after {
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65));
    content: "";
    pointer-events: none;
}

.duration-badge,
.category-badge {
    position: absolute;
    z-index: 2;
    bottom: .45rem;
    padding: .22rem .42rem;
    border-radius: .35rem;
    color: #fff;
    font-size: .62rem;
    line-height: 1.2;
}

.duration-badge {
    right: .45rem;
    background: rgba(0, 0, 0, .72);
}

.category-badge {
    left: .45rem;
    max-width: 55%;
    overflow: hidden;
    background: rgba(255, 73, 108, .9);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-body-custom {
    padding: .7rem;
}

.video-title {
    display: -webkit-box;
    min-height: 2.55rem;
    margin: 0 0 .55rem;
    overflow: hidden;
    color: #f1f3f7;
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.video-title a {
    color: inherit;
    text-decoration: none;
}

.video-meta {
    display: flex;
    gap: .8rem;
    color: var(--app-muted);
    font-size: .68rem;
}

.video-meta span {
    display: inline-flex;
    gap: .28rem;
    align-items: center;
    min-width: 0;
}

.video-meta svg {
    width: .8rem;
    height: .8rem;
}

.empty-state {
    padding: 4rem 1.5rem;
    border: 1px dashed var(--app-border);
    border-radius: 1rem;
    background: var(--app-surface);
    color: var(--app-muted);
    text-align: center;
}

.empty-state h2 {
    color: var(--app-text);
}

.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding-top: 2rem;
}

.page-button {
    padding: .6rem .95rem;
    border: 1px solid var(--app-border);
    border-radius: .7rem;
    background: var(--app-surface);
    color: #d5d9e2;
    font-size: .78rem;
    text-decoration: none;
}

.page-button.disabled {
    opacity: .38;
    pointer-events: none;
}

.page-status {
    color: var(--app-muted);
    font-size: .74rem;
}

@media (min-width: 576px) {
    .card-body-custom {
        padding: .85rem;
    }

    .video-title {
        font-size: .95rem;
    }

    .video-meta {
        font-size: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-cover {
        transition: none;
    }
}

.detail-header {
    background: rgba(13, 15, 20, .9);
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(18px);
}

.back-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: .35rem .75rem;
    border: 1px solid var(--app-border);
    border-radius: .55rem;
    background: var(--app-surface);
    color: var(--app-text);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 650;
}

.detail-main {
    padding-top: 1rem;
}

.dplayer-shell,
.player-unavailable {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: .9rem;
    background: #000;
}

.dplayer-shell .dplayer-video-wrap,
.dplayer-shell video {
    height: 100%;
}

.player-unavailable {
    display: grid;
    place-items: center;
    color: var(--app-muted);
    font-size: .85rem;
}

.player-error {
    margin-top: .65rem;
    padding: .7rem .85rem;
    border-radius: .65rem;
    background: rgba(220, 53, 69, .14);
    color: #ff8995;
    font-size: .78rem;
}

.player-lines {
    margin-top: .8rem;
    padding: .8rem;
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    background: var(--app-surface);
}

.player-lines-title {
    margin-bottom: .65rem;
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 650;
}

.player-line-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.player-line-button {
    min-width: 0;
    padding: .52rem .35rem;
    border: 1px solid var(--app-border);
    border-radius: .58rem;
    background: var(--app-surface-soft);
    color: #d8dce5;
    font-size: .72rem;
    line-height: 1.25;
}

.player-line-button span,
.player-line-button small {
    display: block;
}

.player-line-button small {
    margin-top: .2rem;
    overflow: hidden;
    color: var(--app-muted);
    font-size: .57rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-line-button .player-line-status {
    width: fit-content;
    margin: .38rem auto 0;
    padding: .12rem .38rem;
    border-radius: 999px;
    font-size: .56rem;
    font-weight: 650;
}

.player-line-status.is-checking {
    background: rgba(255, 193, 7, .14);
    color: #e8bf55;
}

.player-line-status.is-available {
    background: rgba(80, 200, 140, .14);
    color: #78daa9;
}

.player-line-status.is-unavailable,
.player-line-status.is-timeout {
    background: rgba(220, 53, 69, .14);
    color: #ff8995;
}

.player-line-button.is-active {
    border-color: rgba(255, 73, 108, .7);
    background: var(--app-accent-soft);
    color: #ff8ba1;
}

.player-line-button.is-active small {
    color: #ff9caf;
}

@media (min-width: 576px) {
    .player-line-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.detail-info {
    padding: 1.2rem .15rem 1.5rem;
    border-bottom: 1px solid var(--app-border);
}

.detail-toolbar {
    display: flex;
    gap: .7rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.detail-category {
    display: inline-flex;
    padding: .3rem .58rem;
    border-radius: 999px;
    background: var(--app-accent-soft);
    color: #ff7892;
    text-decoration: none;
    font-size: .68rem;
}

.share-button {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    padding: .32rem .55rem;
    border: 1px solid var(--app-border);
    border-radius: .55rem;
    background: var(--app-surface-soft);
    color: #d8dce5;
    font-size: .68rem;
}

.share-button small {
    color: var(--app-muted);
    font-size: .6rem;
}

.share-button.is-copied {
    border-color: rgba(80, 200, 140, .35);
    color: #78daa9;
}

.detail-title {
    margin-bottom: .9rem;
    font-size: 1.15rem;
    font-weight: 750;
    line-height: 1.55;
    letter-spacing: -.02em;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    color: var(--app-muted);
    font-size: .72rem;
}

.detail-meta span {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
}

.detail-meta svg {
    width: .85rem;
    height: .85rem;
    fill: currentColor;
}

.detail-meta strong {
    color: #dfe3eb;
    font-weight: 650;
}

.detail-duration {
    padding-left: .8rem;
    border-left: 1px solid var(--app-border);
}

.related-section {
    padding-top: 1.5rem;
}

.related-card {
    display: block;
    color: var(--app-text);
    text-decoration: none;
}

.related-cover-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    margin-bottom: .55rem;
    border-radius: .7rem;
    background: var(--app-surface-soft);
}

.related-cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-cover-wrap span {
    position: absolute;
    right: .4rem;
    bottom: .4rem;
    padding: .18rem .35rem;
    border-radius: .3rem;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: .6rem;
}

.related-card strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.login-page {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: max(1.25rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 50% 0, rgba(255, 73, 108, .18), transparent 28rem),
        var(--app-bg);
}

.login-container {
    width: min(100%, 410px);
}

.login-card {
    padding: 2rem 1.35rem;
    border: 1px solid var(--app-border);
    border-radius: 1.25rem;
    background: rgba(23, 26, 33, .94);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .28);
}

.login-brand {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 1.4rem;
    place-items: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, #ff6b7f, #e72960);
    box-shadow: 0 .7rem 2rem rgba(231, 41, 96, .28);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
}

.login-eyebrow {
    color: var(--app-accent);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.login-card h1 {
    margin: .3rem 0 .4rem;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.login-description {
    margin-bottom: 1.6rem;
    color: var(--app-muted);
    font-size: .82rem;
}

.login-error {
    margin-bottom: 1rem;
    padding: .72rem .8rem;
    border: 1px solid rgba(255, 73, 108, .22);
    border-radius: .7rem;
    background: var(--app-accent-soft);
    color: #ff899f;
    font-size: .78rem;
}

.login-form {
    display: grid;
    gap: 1rem;
}

.login-form label {
    margin-bottom: .4rem;
    color: #c7ccd6;
    font-size: .75rem;
    font-weight: 650;
}

.login-form .form-control {
    height: 3rem;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background: var(--app-surface-soft);
    color: var(--app-text);
    font-size: 1rem;
}

.login-form .form-control:focus {
    border-color: rgba(255, 73, 108, .55);
    background: #242832;
    color: var(--app-text);
    box-shadow: 0 0 0 .2rem rgba(255, 73, 108, .1);
}

.login-submit {
    height: 3rem;
    margin-top: .35rem;
    border: 0;
    border-radius: .75rem;
    background: linear-gradient(135deg, #ff5f7d, #e72960);
    color: #fff;
    font-size: .9rem;
    font-weight: 750;
    box-shadow: 0 .65rem 1.5rem rgba(231, 41, 96, .2);
}

.login-submit:hover,
.login-submit:focus {
    background: linear-gradient(135deg, #ff718a, #f02b65);
    color: #fff;
}

@media (min-width: 576px) {
    .login-card {
        padding: 2.4rem;
    }
}

.history-container {
    width: min(100%, 1080px);
}

.history-header-title {
    font-size: .9rem;
}

.history-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
}

.history-summary div {
    display: grid;
    gap: .2rem;
    padding: .85rem .55rem;
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    background: var(--app-surface);
    text-align: center;
}

.history-summary strong {
    color: var(--app-text);
    font-size: 1rem;
}

.history-summary span {
    color: var(--app-muted);
    font-size: .65rem;
}

.history-search {
    display: flex;
    gap: .55rem;
}

.history-search .form-control {
    min-width: 0;
    border: 1px solid var(--app-border);
    border-radius: .7rem;
    background: var(--app-surface-soft);
    color: var(--app-text);
    font-size: 1rem;
}

.history-search .form-control:focus {
    border-color: rgba(255, 73, 108, .55);
    background: #242832;
    color: var(--app-text);
    box-shadow: 0 0 0 .2rem rgba(255, 73, 108, .1);
}

.history-table-wrap {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: .85rem;
}

.history-table {
    min-width: 780px;
    --bs-table-bg: var(--app-surface);
    --bs-table-color: #d8dce5;
    --bs-table-border-color: var(--app-border);
}

.history-table th {
    padding: .75rem;
    color: var(--app-muted);
    font-size: .68rem;
    font-weight: 650;
    white-space: nowrap;
}

.history-table td {
    padding: .75rem;
    font-size: .74rem;
}

.history-table time {
    color: var(--app-muted);
    white-space: nowrap;
}

.history-user,
.history-count {
    display: inline-flex;
    padding: .25rem .45rem;
    border-radius: .4rem;
    background: var(--app-accent-soft);
    color: #ff829a;
    white-space: nowrap;
}

.history-video {
    display: block;
    max-width: 25rem;
    overflow: hidden;
    color: #e8eaf0;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-table small {
    display: block;
    margin-top: .2rem;
    color: var(--app-muted);
    font-size: .62rem;
}

@media (min-width: 576px) {
    .history-summary div {
        padding: 1.1rem;
    }

    .history-summary strong {
        font-size: 1.25rem;
    }
}