/* F3 video-portal family stylesheet — dark cinema system.
   Palette: #14181f ground, raised #1d232e panels, amber accent. */
:root {
    --vd-bg:#14181f;
    --vd-bg-soft:#191e27;
    --vd-panel:#1d232e;
    --vd-panel-2:#232b38;
    --vd-line:#2e3745;
    --vd-line-soft:rgb(38,46,59);
    --vd-ink:rgb(232,236,241);
    --vd-body:#c3ccd6;
    --vd-mute:#8b98a8;
    --vd-accent:rgb(242,163,60);
    --vd-accent-soft:#ffcf87;
    --vd-red:rgb(229,83,75);
    --vd-maxw:1180px;
    --vd-sans:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

* {
    box-sizing:border-box;
}

html {
    -webkit-text-size-adjust:100%;
}

body {
    margin:0;
    background:var(--vd-bg);
    color:var(--vd-body);
    font-family:var(--vd-sans);
    font-size:15.5px;
    line-height:1.75;
}

a {
    color:var(--vd-accent-soft);
    text-decoration:none;
}

a:hover {
    color:var(--vd-accent);
    text-decoration:underline;
}

a:focus-visible {
    outline:2px solid var(--vd-accent);
    outline-offset:2px;
}

::selection {
    background:rgb(90,61,20);
    color:rgb(255,233,196);
}

.vd-wrap {
    max-width:var(--vd-maxw);
    margin:0 auto;
    padding:0 14px;
}

main {
    display:block;
    max-width:var(--vd-maxw);
    margin:0 auto;
    padding:16px 14px 10px;
}

main h1 {
    font-size:26px;
    line-height:1.4;
    margin:0 0 10px;
    color:var(--vd-ink);
}

main h2 {
    font-size:20px;
    line-height:1.45;
    margin:0 0 10px;
    color:var(--vd-ink);
}

main h3 {
    font-size:16.5px;
    line-height:1.5;
    margin:0 0 5px;
}

main p {
    margin:0 0 .95em;
}

main ul, main ol {
    margin:.2em 0 1em;
    padding-left:1.35em;
}

main li {
    margin:.24em 0;
}

main strong {
    color:var(--vd-accent-soft);
}

main img {
    max-width:100%;
    height:auto;
}

.vd-topbar {
    background:#0d1015;
    color:#93a1b3;
    font-size:12.5px;
    border-bottom:1px solid var(--vd-line-soft);
}

.vd-topbar .vd-wrap {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding-top:5px;
    padding-bottom:5px;
    flex-wrap:wrap;
}

.vd-topbar a {
    color:#c8d2de;
}

.vd-topbar .vd-tb-name {
    color:var(--vd-ink);
    font-weight:700;
}

.vd-mast {
    background:linear-gradient(180deg,rgb(26,32,41) 0%,var(--vd-bg-soft) 100%);
    border-bottom:1px solid var(--vd-line);
}

.vd-mastrow {
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 0 8px;
    flex-wrap:wrap;
}

.vd-mark {
    flex:none;
    width:52px;
    height:52px;
    border-radius:12px;
    background:var(--vd-accent);
    color:#191204;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:900;
    line-height:1;
}

.vd-sitename {
    font-size:29px;
    font-weight:800;
    line-height:1.25;
    margin:0;
    color:var(--vd-ink);
}

.vd-tagline {
    font-size:13.5px;
    color:var(--vd-mute);
    margin:2px 0 0;
}

.vd-maststats {
    line-height:1.8;
    text-align:right;
    font-size:12.5px;
    color:var(--vd-mute);
    margin-left:auto;
}

.vd-maststats b {
    color:var(--vd-accent-soft);
    font-size:15px;
}

.vd-channav {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:8px 0 14px;
}

.vd-channav a {
    font-size:14px;
    font-weight:600;
    color:var(--vd-body);
    background:var(--vd-panel);
    border:1px solid var(--vd-line);
    border-radius:999px;
    padding:3px 14px;
}

.vd-channav a:hover {
    border-color:var(--vd-accent);
    color:var(--vd-accent-soft);
    text-decoration:none;
}

.vd-channav a.vd-on {
    background:var(--vd-accent);
    color:rgb(25,18,4);
    border-color:var(--vd-accent);
}

.vd-crumbs {
    font-size:13px;
    color:var(--vd-mute);
    margin:0 0 12px;
}

.vd-crumbs ol {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:2px 5px;
    padding:0;
    margin:0;
}

.vd-crumbs li {
    margin:0;
}

.vd-crumbs li+li::before {
    color:var(--vd-mute);
    content:"›";
    margin-right:5px;
}

.vd-crumbs a {
    color:var(--vd-mute);
    text-decoration:underline;
}

.vd-sechead {
    display:flex;
    align-items:baseline;
    gap:10px;
    margin:22px 0 12px;
}

.vd-sechead h2 {
    margin:0;
    font-size:20px;
}

.vd-sechead .vd-kick {
    font-size:11px;
    letter-spacing:.16em;
    color:var(--vd-accent);
    font-weight:800;
}

.vd-sechead .vd-more {
    white-space:nowrap;
    font-size:13.5px;
    margin-left:auto;
}

.vd-basis {
    font-size:12.5px;
    color:var(--vd-mute);
    margin:-4px 0 12px;
}

.vd-card {
    background:var(--vd-panel);
    border:1px solid var(--vd-line-soft);
    border-radius:10px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.vd-card:hover {
    border-color:var(--vd-accent);
}

.vd-card .vd-thumb {
    position:relative;
    display:block;
    line-height:0;
}

.vd-card .vd-thumb img {
    object-fit:cover;
    aspect-ratio:16/9;
    width:100%;
}

.vd-badge {
    position:absolute;
    left:8px;
    top:8px;
    background:rgba(10,12,16,.82);
    color:var(--vd-accent-soft);
    font-size:11px;
    font-weight:700;
    line-height:1.7;
    padding:0 8px;
    border-radius:4px;
    letter-spacing:.06em;
}

.vd-cardbody {
    padding:10px 12px 12px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.vd-cardbody h3 {
    font-size:15.5px;
    line-height:1.5;
    margin:0;
}

.vd-cardbody h3 a {
    color:var(--vd-ink);
}

.vd-kandian {
    font-size:13px;
    color:var(--vd-mute);
    line-height:1.6;
    margin:0;
}

.vd-cardmeta {
    display:flex;
    gap:8px;
    align-items:center;
    font-size:12px;
    color:var(--vd-mute);
    margin-top:2px;
    flex-wrap:wrap;
}

.vd-chip {
    display:inline-block;
    font-size:11.5px;
    color:var(--vd-accent-soft);
    background:#2a2113;
    border:1px solid #4a3a1c;
    padding:0 7px;
    line-height:1.8;
    border-radius:4px;
}

.vd-chip:hover {
    color:var(--vd-accent);
    text-decoration:none;
}

.vd-focus {
    display:grid;
    grid-template-columns:1.9fr 1fr;
    gap:14px;
    margin:4px 0 6px;
}

.vd-focus .vd-card .vd-cardbody h3 {
    font-size:21px;
}

.vd-focus .vd-kandian {
    font-size:14px;
}

.vd-focus-side {
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:14px;
}

.vd-layout {
    display:grid;
    grid-template-columns:1fr 308px;
    gap:20px;
    align-items:start;
}

.vd-row {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.vd-row3 {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.vd-relmesh {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.vd-relmesh>li {
    margin:0;
    display:flex;
}

.vd-relmesh .vd-card {
    flex:1;
}

@media (max-width: 1020px) {
    .vd-relmesh {
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width: 680px) {
    .vd-relmesh {
        grid-template-columns:1fr;
    }
}

.vd-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.vd-rail {
    background:var(--vd-panel);
    border:1px solid var(--vd-line-soft);
    border-radius:10px;
    padding:13px 15px 8px;
    margin:0 0 16px;
}

.vd-rail h2 {
    font-size:17px;
    margin:0 0 4px;
}

.vd-ranklist {
    list-style:none;
    margin:6px 0 4px;
    padding:0;
    counter-reset:rk;
}

.vd-ranklist li {
    display:flex;
    gap:10px;
    padding:7px 0;
    align-items:baseline;
    border-bottom:1px solid var(--vd-line-soft);
}

.vd-ranklist li:last-child {
    border-bottom:none;
}

.vd-rk {
    flex:none;
    width:22px;
    height:22px;
    border-radius:6px;
    text-align:center;
    font-size:13px;
    font-weight:800;
    line-height:22px;
    background:var(--vd-panel-2);
    color:var(--vd-mute);
}

.vd-ranklist li:nth-child(-n+3) .vd-rk {
    background:var(--vd-accent);
    color:#191204;
}

.vd-ranklist .vd-rt {
    font-size:14.5px;
    line-height:1.5;
}

.vd-ranklist .vd-rt a {
    color:var(--vd-ink);
}

.vd-ranklist .vd-rs {
    margin-left:auto;
    font-size:12px;
    color:var(--vd-mute);
    white-space:nowrap;
}

.vd-albumgrid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.vd-albumindex {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px 22px;
}

.vd-albumindex li {
    display:flex;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px dashed var(--vd-line-soft);
    padding:5px 0;
}

.vd-albumindex span {
    white-space:nowrap;
    color:var(--vd-dim);
    font-size:12.5px;
}

.vd-albumcard {
    background:var(--vd-panel);
    border:1px solid var(--vd-line-soft);
    border-radius:10px;
    overflow:hidden;
}

.vd-albumcard img {
    display:block;
    aspect-ratio:16/9;
    object-fit:cover;
    width:100%;
}

.vd-albumcard .vd-cardbody h3 a {
    color:var(--vd-ink);
}

.vd-tagwall {
    line-height:2.1;
    margin:0;
}

.vd-tagwall a {
    display:inline-block;
    font-size:13px;
    color:var(--vd-body);
    background:var(--vd-panel);
    border:1px solid var(--vd-line);
    padding:0 10px;
    border-radius:999px;
    margin:0 5px 6px 0;
}

.vd-tagwall a:hover {
    border-color:var(--vd-accent);
    color:var(--vd-accent-soft);
    text-decoration:none;
}

.vd-posterhead {
    margin:0 0 14px;
}

.vd-posterframe {
    position:relative;
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--vd-line);
    line-height:0;
}

.vd-posterframe img {
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}

.vd-posterframe .vd-badge {
    font-size:12.5px;
    top:12px;
    left:12px;
    padding:1px 10px;
}

.vd-posternote {
    font-size:13px;
    color:var(--vd-mute);
    margin:7px 0 0;
    line-height:1.7;
}

.vd-metaline {
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    align-items:center;
    font-size:13px;
    color:var(--vd-mute);
    border-top:1px solid var(--vd-line-soft);
    border-bottom:1px solid var(--vd-line-soft);
    padding:8px 0;
    margin:0 0 14px;
}

.vd-metaline b {
    color:var(--vd-body);
}

.vd-lede {
    font-size:16.5px;
    color:var(--vd-ink);
    line-height:1.85;
    background:var(--vd-panel);
    border-left:3px solid var(--vd-accent);
    padding:12px 16px;
    margin:0 0 16px;
}

.vd-seg {
    background:var(--vd-bg-soft);
    border:1px solid var(--vd-line-soft);
    border-radius:10px;
    padding:13px 17px 6px;
    margin:0 0 13px;
}

.vd-segbar {
    display:flex;
    gap:10px;
    align-items:baseline;
    margin:0 0 7px;
}

.vd-segno {
    flex:none;
    background:var(--vd-accent);
    color:#191204;
    font-weight:800;
    font-size:12.5px;
    line-height:1.9;
    padding:0 9px;
    border-radius:5px;
}

.vd-segbar h2 {
    font-size:18px;
    margin:0;
}

.vd-segnav {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0 0 14px;
    font-size:13px;
}

.vd-segnav a {
    background:var(--vd-panel);
    border:1px solid var(--vd-line);
    border-radius:999px;
    padding:1px 11px;
    color:var(--vd-body);
}

.vd-tagrow {
    font-size:13.5px;
    color:var(--vd-mute);
    margin:14px 0 4px;
}

.vd-prevnext {
    display:flex;
    justify-content:space-between;
    gap:14px;
    font-size:14px;
    margin:12px 0 4px;
    flex-wrap:wrap;
}

.vd-chanhead {
    display:grid;
    grid-template-columns:1fr 300px;
    gap:18px;
    background:var(--vd-panel);
    border:1px solid var(--vd-line-soft);
    border-radius:12px;
    padding:16px 18px;
    margin:0 0 16px;
    align-items:center;
}

.vd-chanhead img {
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:8px;
}

.vd-chanhead p {
    color:var(--vd-body);
    margin:0 0 6px;
}

.vd-chanstats {
    font-size:13px;
    color:var(--vd-mute);
}

.vd-help details {
    background:var(--vd-panel);
    border:1px solid var(--vd-line-soft);
    border-radius:10px;
    padding:11px 15px;
    margin:0 0 10px;
}

.vd-help summary {
    cursor:pointer;
    font-size:16px;
    font-weight:700;
    line-height:1.5;
    color:var(--vd-ink);
}

.vd-help summary::marker {
    color:var(--vd-accent);
}

.vd-help details p {
    margin:.6em 0 .2em;
    color:var(--vd-body);
}

.vd-tagsec {
    background:var(--vd-panel);
    border:1px solid var(--vd-line-soft);
    border-radius:10px;
    padding:6px 16px 10px;
    margin:0 0 14px;
}

.vd-tagsec h2 {
    border-bottom:1px solid var(--vd-line-soft);
    padding-bottom:5px;
    font-size:18px;
    margin-top:10px;
}

.vd-plain {
    background:var(--vd-panel);
    border:1px solid var(--vd-line-soft);
    border-radius:10px;
    padding:8px 18px 12px;
}

.vd-foot {
    background:#0d1015;
    border-top:3px solid var(--vd-accent);
    color:rgb(147,161,179);
    margin-top:30px;
    font-size:13.5px;
}

.vd-footgrid {
    display:grid;
    grid-template-columns:1.7fr 1fr 1fr;
    gap:24px;
    padding:22px 0 4px;
}

.vd-footname {
    font-size:18px;
    font-weight:800;
    color:var(--vd-ink);
    margin:0 0 6px;
}

.vd-foot p {
    margin:0 0 8px;
    line-height:1.75;
}

.vd-footnav {
    display:flex;
    flex-direction:column;
    gap:5px;
}

.vd-foothead {
    font-weight:700;
    color:var(--vd-ink);
    margin-bottom:3px;
}

.vd-footnav a {
    color:rgb(147,161,179);
}

.vd-footnav a:hover {
    color:var(--vd-accent-soft);
}

.vd-footline {
    border-top:1px solid var(--vd-line-soft);
    margin:14px 0 0;
    padding:11px 0 17px;
    font-size:12.5px;
    color:#67758A;
}

@media (max-width: 1020px) {
    .vd-layout {
        grid-template-columns:1fr;
    }
    .vd-row {
        grid-template-columns:repeat(2,1fr);
    }
    .vd-albumgrid {
        grid-template-columns:repeat(2,1fr);
    }
    .vd-grid {
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width: 680px) {
    body {
        font-size:15px;
    }
    .vd-sitename {
        font-size:23px;
    }
    .vd-maststats {
        margin-left:0;
        text-align:left;
    }
    .vd-focus {
        grid-template-columns:1fr;
    }
    .vd-row,.vd-row3,.vd-grid {
        grid-template-columns:1fr;
    }
    .vd-chanhead {
        grid-template-columns:1fr;
    }
    .vd-footgrid {
        grid-template-columns:1fr;
    }
    main h1 {
        font-size:22px;
    }
}

@media print {
    .vd-topbar,.vd-mast,.vd-foot {
        display:none;
    }
    body {
        font-size:12pt;
        background:#fff;
        color:#000;
    }
}