:root {
    --hue-primary: 210;
    --hue-neutral: 220;
    
    --bg-color: hsl(var(--hue-neutral), 10%, 8%);
    --surface-color: hsl(var(--hue-neutral), 10%, 12%);
    --border-color: hsl(var(--hue-neutral), 10%, 20%);
    --text-color: hsl(var(--hue-neutral), 15%, 85%);
    --text-muted-color: hsl(var(--hue-neutral), 10%, 55%);

    --primary-color: hsl(var(--hue-primary), 90%, 65%);
    --primary-color-hover: hsl(var(--hue-primary), 90%, 75%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { color: white; margin-bottom: 1rem; line-height: 1.2; }
h1 { font-size: 4rem; font-weight: 700; }
h2 { font-size: 2rem; text-align: center; }
p { margin-bottom: 1rem; }
a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--primary-color-hover); }

.main-header { padding: 1.5rem 0; border-bottom: 1px solid var(--border-color); background-color: var(--bg-color); }
.main-header nav { display: flex; justify-content: space-between; align-items: center; }
.nav-left { display: flex; align-items: center; gap: 1.5rem; }
.nav-brand { font-weight: 700; font-size: 1.5rem; color: white; flex-shrink: 0; }
.nav-links { display: flex; gap: 2rem; align-items: center; flex-shrink: 0; }
.nav-link { color: var(--text-color); font-weight: 600; position: relative; padding: 0.25rem 0; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary-color), var(--primary-color-hover)); transition: width 0.3s ease-out; }
.nav-link:hover::after { width: 100%; }

.back-to-gallery-link i {
    margin-right: 8px;
}

.nav-user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
    font-weight: 600;
    position: relative;
    padding: 0.25rem 0;
    cursor: pointer;
}

.nav-user-profile::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color-hover));
    transition: width 0.3s ease-out;
}

.nav-user-profile:hover::after {
    width: 100%;
}

.nav-user-profile img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

main {
    flex-grow: 1;
    width: 100%;
}

.main-centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero { text-align: center; } 
.hero-title { background: linear-gradient(90deg, white, var(--text-muted-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; letter-spacing: -2px; margin-left: auto; margin-right: auto; }
.hero-subtitle { color: var(--text-muted-color); font-size: 1.25rem; }

.button-primary { display: inline-block; margin-top: 1.5rem; padding: 0.75rem 1.5rem; background-color: var(--primary-color); color: white; font-weight: 600; border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease; cursor: pointer; border: none; }
.button-primary:hover { background-color: var(--primary-color-hover); color: white; transform: translateY(-3px); }

.search-wrapper { position: relative; display: flex; align-items: center; background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.25rem; transition: border-color 0.3s, box-shadow 0.3s; }
.search-wrapper:focus-within, .search-wrapper.is-filled { border-color: var(--primary-color); box-shadow: 0 0 0 3px hsla(var(--hue-primary), 90%, 65%, 0.2); }
.search-input { background: none; border: none; outline: none; width: 0; padding: 0; color: var(--text-color); font-size: 1rem; transition: width 0.4s ease, padding 0.4s ease; }
.search-wrapper:focus-within .search-input, .search-wrapper.is-filled .search-input { width: 250px; padding: 0.4rem 0.6rem; }
.search-button { background: none; border: none; color: var(--text-muted-color); font-size: 1.1rem; cursor: pointer; padding: 0.4rem; display: flex; align-items: center; justify-content: center; transition: color 0.3s; }
.search-wrapper:focus-within .search-button, .search-wrapper.is-filled .search-button { color: var(--primary-color); }

.highlight { color: var(--primary-color); text-decoration: underline; text-decoration-color: var(--primary-color); background-color: transparent; }

#video-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; width: 100%; margin: 2rem 0; }
#message-area { grid-column: 1 / -1; text-align: center; color: var(--text-muted-color); }
.video-card { display: block; text-decoration: none; color: var(--text-color); }
.video-container { background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.video-card:hover .video-container { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.3); }
.video-thumbnail { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; background-color: #000; object-fit: cover; }

.card-content { padding: 10px 15px; }
.title-line { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; cursor: pointer; }
.owner-pfp { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; }
.game-title { font-weight: 600; color: var(--text-color); }
.by-text { font-size: 0.8rem; color: var(--text-muted-color); }
.owner-name { font-weight: 600; color: var(--text-color); }
.meta-line { display: flex; justify-content: space-between; align-items: center; }
.clip-date { font-size: 0.8rem; color: var(--text-muted-color); }
.share-button { background: none; border: none; color: var(--text-muted-color); font-size: 1.1rem; cursor: pointer; padding: 5px; transition: color 0.3s, transform 0.2s; z-index: 2; position: relative; }
.share-button:hover { color: var(--primary-color); transform: scale(1.1); }

.copy-feedback { position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 150%); background-color: var(--primary-color); color: white; padding: 10px 20px; border-radius: 8px; font-weight: 600; opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; z-index: 1000; }
.copy-feedback.show { transform: translate(-50%, 0); opacity: 1; }

.solo-player-wrapper { width: 100%; text-align: center; margin: 4rem 0; }
.solo-player-wrapper.is-error { display: flex; flex-grow: 1; align-items: center; justify-content: center; }
.solo-player-wrapper.is-error .error-message { color: hsl(0, 80%, 70%); }
#player-container video { width: 100%; max-width: 1000px; height: auto; border-radius: 8px; border: 1px solid var(--border-color); }
.clip-title-solo { font-size: 2rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.clip-date-solo { font-size: 1rem; color: var(--text-muted-color); margin-top: -0.5rem; margin-bottom: 2rem; }
.clip-actions { text-align: center; min-height: 70px; }
.uploader-info { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 1.5rem; font-size: 1.1rem; color: var(--text-muted-color); }
.uploader-info img { width: 40px; height: 40px; border-radius: 50%; }
.uploader-info strong { color: var(--text-color); font-weight: 600; }

.login-form { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 350px; margin-left: auto; margin-right: auto; }
.login-input { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.login-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px hsla(var(--hue-primary), 90%, 65%, 0.2); }
.login-form .button-primary { width: 100%; margin-top: 0; }
.error-message { color: hsl(0, 80%, 70%); min-height: 1.2em; margin-top: 0.5rem; }

.main-footer { padding: 2rem 0; background-color: var(--surface-color); border-top: 1px solid var(--border-color); }
.footer-columns { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.footer-left { text-align: left; }
.footer-left h2 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.footer-left p { color: var(--text-muted-color); margin: 0; }
.footer-center .creds { margin: 0; font-size: 0.9rem; color: hsl(var(--hue-neutral), 10%, 40%); }
.footer-right .social-links { display: flex; gap: 1.5rem; }
.footer-right .social-links a { color: var(--text-muted-color); font-size: 1.5rem; transition: color 0.3s ease, transform 0.3s ease; }
.footer-right .social-links a:hover { color: var(--primary-color); transform: translateY(-3px); }

#filter-status-area {
    width: 100%;
    text-align: center;
}
.filter-status {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: -1rem;
    color: var(--text-muted-color);
    padding: 0.5rem 1rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: inline-block;
}
.filter-status strong {
    color: var(--text-color);
}
.filter-status .show-all-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    margin-left: 10px;
}
.filter-status .show-all-link:hover {
    text-decoration: underline;
}

/* Settings Page Styles */
.settings-container {
    width: 100%;
    margin-top: 2rem;
}
.settings-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.settings-pfp {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}
.settings-username {
    font-size: 2.5rem;
    margin-bottom: 0;
}
.settings-content {
    display: flex;
    gap: 2rem;
}
.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
    width: 200px;
}
.settings-nav-item {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    color: var(--text-muted-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.settings-nav-item:hover {
    background-color: var(--surface-color);
    color: var(--text-color);
}
.settings-nav-item.active {
    background-color: var(--surface-color);
    color: white;
}
.settings-panel {
    flex-grow: 1;
}
.settings-tab {
    display: none;
}
.settings-tab.active {
    display: block;
}
.settings-tab h2 {
    text-align: left;
    margin-bottom: 2rem;
}
.settings-tab p {
    color: var(--text-muted-color);
    margin-bottom: 2rem;
}
.settings-form .form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}
.setting-item label {
    font-weight: 600;
    margin-bottom: 0;
}

.switch-container {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    transition: .4s;
}

.switch-label:after {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-muted-color);
    border-radius: 50%;
    transition: .4s;
}

input:checked + .switch-label {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

input:checked + .switch-label:after {
    transform: translateX(22px);
    background-color: white;
}
.settings-input {
    width: 100%;
    max-width: 500px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.settings-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px hsla(var(--hue-primary), 90%, 65%, 0.2);
}
.settings-form .button-primary {
    margin-top: 0;
}
.form-status-message {
    min-height: 1.2em;
    margin-top: 1rem;
}

@media (max-width: 992px) { 
    #video-gallery { grid-template-columns: repeat(2, 1fr); } 
}

@media (max-width: 768px) {
    .footer-columns { flex-direction: column; gap: 2rem; }
    .footer-left, .footer-center, .footer-right { text-align: center; }
    .main-header nav { flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
    .nav-left { order: 1; flex-grow: 1; }
    .nav-links { order: 2; }
    h1 { font-size: 3rem; }
    h2 { font-size: 1.8rem; }
    .clip-title-solo { font-size: 1.5rem; }
}

@media (max-width: 600px) { 
    #video-gallery { grid-template-columns: 1fr; } 
}
.clip-meta-solo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: -0.5rem;
    margin-bottom: 2rem;
}

.clip-date-solo {
    font-size: 1rem;
    color: var(--text-muted-color);
    margin: 0;
}

.clip-status-indicator {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.clip-status-indicator.is-public {
    background-color: hsl(140, 50%, 25%);
    color: hsl(140, 50%, 80%);
}

.clip-status-indicator.is-private {
    background-color: hsl(0, 50%, 25%);
    color: hsl(0, 50%, 80%);
}