:root {
    --bg-color: #f5f5f5;
    --text-color: #000;
    --text-sec: #222;
    --input-bg: #f5f5f5;
    --border: #ccc;
    --toggle-bg: #aaa;
    --footer: #f6f6f6;
    --footer-text: #111;
    --button-bg: #eee;
    --button-hl-bg: #d9e1fa;
    --video-meta: #333;
    --placeholder: #999;
    --url-small: #444;
    --subtext: #444;
    --popout: #fff;
    --popup: #f1f1f1;
    --placeholder-bg: #aaa;
    --link: #4141ea;
    --visited: #8634d3;
    --chip-bg: #e9e9e9;
    --chip-color: #1b1b1b;
    --success: #2a972a;
    --error: #d33333;
    --warn: #d38b33;
    --go: #237fe3;
    --go-button-color: #eee;
}

.dark {
    --bg-color: #111113;
    --text-color: #eee;
    --text-sec: #ccc;
    --input-bg: #17181a;
    --border: #212123;
    --toggle-bg: #303032;
    --footer: #0e0e10;
    --footer-text: #bababa;
    --button-bg: #17181a;
    --button-hl-bg: #212431;
    --video-meta: #888;
    --placeholder: #666;
    --url-small: #aaa;
    --subtext: #aaa;
    --popout: #0f0f11;
    --popup: #19191b;
    --placeholder-bg: #252526;
    --link: #5f5fdc;
    --visited: #8652b6;
    --chip-bg: #242425;
    --chip-color: #ddd;
    --success: #419641;
    --error: #c03f3f;
    --warn: #ca8736;
    --go: #367ed1;
    --go-button-color: #eee;
}

.black {
    --bg-color: #000;
    --text-color: #ddd;
    --text-sec: #bbb;
    --input-bg: #0a0a0b;
    --border: #333;
    --toggle-bg: #222;
    --footer: #010101;
    --footer-text: #bbb;
    --button-bg: #121212;
    --button-hl-bg: #1a1a1a;
    --video-meta: #555;
    --placeholder: #777;
    --url-small: #aaa;
    --subtext: #aaa;
    --popout: #000000;
    --popup: #0a0a0b;
    --placeholder-bg: #000;
    --link: #5f5fdc;
    --visited: #8652b6;
    --chip-bg: #252525;
    --chip-color: #ddd;
    --success: #3a853a;
    --error: #ae4444;
    --go: #34689f;
    --go-button-color: #eee;
}

.dark .icon,
.black .icon {
    filter: invert(1) brightness(0.85);
}

header {
    padding: 16px 0;
}

header .login {
    background-color: var(--button-hl-bg);
    color: var(--text-color);
    padding: 8px 20px;
    border-radius: 26px;
    text-decoration: none;
    font-size: 15px;
    margin-left: 4px;
}

.profile-picture {
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

header .profile-picture {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    cursor: pointer;
}

.avatar {
    width: 100%;
    height: 100%;
}

.avatar.fallback {
    background: #666;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.2em;
    font-size: clamp(0.5em, 80%, 5em);
    user-select: none;
    text-transform: uppercase;
}

.account-wrapper[open] .account {
    display: flex;
}

.account-wrapper summary {
    list-style: none;
    cursor: pointer;
    padding-right: 6px;
}

.account a {
    color: var(--url-small);
    text-decoration: none;
}

.account span {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 17px;
}

.account span.terms {
    color: var(--url-small);
    font-size: 15px;
    margin-top: 8px;
}

.account .profile-picture {
    width: 40px;
    height: 40px;
    margin-left: 0;
    cursor: default;
}

.account .button,
.settings-menu .button {
    border: 1px solid var(--border);
    background-color: inherit;
    height: 40px;
    border-radius: 20px;
    padding: 8px 8px;
    color: inherit;
    font-size: 14px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    user-select: none;
    cursor: pointer;
    text-decoration: none;
}

header .content div {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 100%;
}

.settings summary,
header .button {
    list-style: none;
    padding: 8px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    transition: background 150ms;
    cursor: pointer;
}

.settings summary::-webkit-details-marker {
    display: none;
}

.settings summary:hover,
header .button:hover {
    background: var(--button-hl-bg);
}

header .button img {
    user-select: none;
    -webkit-user-drag: none;
}

.settings {
    position: relative;
}

.settings .icon {
    user-select: none;
    -webkit-user-drag: none;
}

.account,
.settings-menu {
    display: none;
    flex-direction: column !important;
    text-align: left;
    position: absolute;
    top: 100%;
    background: var(--popup);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.1);
    z-index: 69;
    box-sizing: border-box;
    right: 4px;
    width: 100%;
    min-width: 240px;
    max-width: 320px;
}

.settings-menu {
    width: auto;
    min-width: 300px;
    max-width: none;
}

.settings-menu p {
    text-align: left;
    font-weight: normal;
    font-size: 1.3em;
    margin: 0;
}

.settings-menu label {
    margin-top: 12px;
    color: var(--footer-text);
    font-weight: 500;
}

.settings-menu input,
.settings-menu select {
    border: 1px solid var(--border);
    background-color: inherit;
    height: 40px;
    border-radius: 8px;
    padding: 8px 8px;
    color: inherit;
    font-size: 14px;
}

html,
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}