* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
                 Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, rgba(102,126,234,0.75) 0%, rgba(118,75,162,0.75) 100%);
    background-size: cover;
    background-position: center;
    /* the page can get very long, stretching out the photos too far: */
    background-attachment: fixed;
    min-height: 100vh;
    padding: 40px 20px;
}
@media (max-width: 550px) {
    body { padding: 40px 5px; }
}

.container {
    max-width: 1000px;
    margin: 0 auto 1.5em auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    text-align: center;
}
.header h1 { font-size: 2.5em; }
.header p  { opacity: 0.9; font-size: 1.1em; }

.content {
  padding: 40px;
  color: oklch(0.1 0 0);
  background-color: oklch(0.82 0 0 / 0.8);
}
@media (max-width: 850px) {
    .content { padding: 5px; }
}
h2 {
    padding-top: 0.5em;
}

.video-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
    margin: 2px;
    display: flex;
    align-items: center;
}
@media (max-width: 700px) {
    .video-card    { flex-direction: column; }
    .video-name    { align-self: flex-start; }
    .video-links   { align-self: flex-end; }
}
.video-card:hover { background: white; border-color: #667eea;
    outline: 2px solid #667eea;
}

.video-icon { font-size: 2em; text-align: center; margin: 0 10px; }
@media (max-width: 700px) { .video-icon { display: none; } }

.video-name {
    font-weight: 600;
    word-break: break-word;
    color: #2d3748;
}
.orig-link { text-decoration: none; }

.video-links {
  flex-grow: 1;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 700px) { .video-links { white-space: normal; } }
.video-link {
    display: inline-block;
    background-color: var(--bg-color-unwatched);
    color: white;
    text-decoration: none;
    margin: 3px;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 500;
    transition: opacity 0.2s;
    text-align: center;
    width: 5.5em;
}
.video-link:hover   { opacity: 0.9; }
.video-link:visited { background-color: var(--bg-color-watched); color: white; }
:root {
    --bg-color-unwatched: #764ba2;
    --bg-color-watched: #8b92a8;
    --bg-color-finished: #f8f9fa; --fg-color-finished: oklch(0.75 0 0);
}
.video-link[data-playback-progress="1"]  { background: linear-gradient(to right, var(--bg-color-watched) 10%, var(--bg-color-unwatched) 10%); }
.video-link[data-playback-progress="2"]  { background: linear-gradient(to right, var(--bg-color-watched) 20%, var(--bg-color-unwatched) 20%); }
.video-link[data-playback-progress="3"]  { background: linear-gradient(to right, var(--bg-color-watched) 30%, var(--bg-color-unwatched) 30%); }
.video-link[data-playback-progress="4"]  { background: linear-gradient(to right, var(--bg-color-watched) 40%, var(--bg-color-unwatched) 40%); }
.video-link[data-playback-progress="5"]  { background: linear-gradient(to right, var(--bg-color-watched) 50%, var(--bg-color-unwatched) 50%); }
.video-link[data-playback-progress="6"]  { background: linear-gradient(to right, var(--bg-color-watched) 60%, var(--bg-color-unwatched) 60%); }
.video-link[data-playback-progress="7"]  { background: linear-gradient(to right, var(--bg-color-watched) 70%, var(--bg-color-unwatched) 70%); }
.video-link[data-playback-progress="8"]  { background: linear-gradient(to right, var(--bg-color-watched) 80%, var(--bg-color-unwatched) 80%); }
.video-link[data-playback-progress="9"]  { background: linear-gradient(to right, var(--bg-color-watched) 90%, var(--bg-color-unwatched) 90%); }
.video-link[data-playback-progress="10"] { background: var(--bg-color-finished); color: var(--fg-color-finished); border: 1px solid var(--fg-color-finished); }

.footer {
    text-align: center;
    padding: 20px;
    color: oklch(0.22 0 0);
    background-color: oklch(0.82 0 0 / 0.8);
    font-size: 0.9em;
    border-top: 1px solid oklch(0.5 0 0 / 0.8);
}
video {
    width: 100%;
    height: auto;
    display: block;
}

input {
    margin: 0 0.4em;
    padding: 0.1em 0.2em;
}

@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, oklch(0.4 0.16 270 / 0.75) 0%, oklch(0.3 0.14 305 / 0.75) 100%);
        background-size: cover;
        background-position: center;
    }
    .header {
        background: linear-gradient(135deg, oklch(0.50 0.1638 271.53) 0%, oklch(0.40 0.1384 304.73) 100%);
    }
    .content {
        color: oklch(0.9 0 0);
        background-color: oklch(0.18 0 0 / 0.88);
    }
    .video-card     { background-color: oklch(0.21 0 0); }
    .video-card:hover { outline-color: #667eea; background-color: oklch(0.1 0 0); }
    .video-name     { color: oklch(0.9 0 0); }
    :root {
        --bg-color-unwatched: oklch(0.40 0.1384 304.73);
        --bg-color-watched: oklch(0.50 0.0336 271.49);
        --bg-color-finished: oklch(0.21 0 0); --fg-color-finished: oklch(0.35 0 0);
    }

    .footer {
        border-color: oklch(0.4 0 0);
        background-color: oklch(0.2 0 0);
        color: oklch(0.8 0 0);
    }
    a {
        color: oklch(0.60 0.1384 304.73);
    }
    a:visited {
        color: oklch(0.60 0.0336 271.49);
    }
}