* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: #f0f4f8;
    font-family: Arial, sans-serif;
    color: #2b3a4a;
    font-size: 13px;
    overflow-x: hidden;
    transition: background-color 0.1s, color 0.1s;
}
a { text-decoration: none; color: #1a73e8; }
.hidden { display: none !important; }

input[type="text"], input[type="password"], input[type="file"], textarea {
    border: 1px solid #b0c4de;
    border-top-color: #9cb3cd;
    padding: 8px;
    font-size: 13px;
    outline: none;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(42, 90, 150, 0.1);
}
.pfp-render-img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.banner-render-img { width: 100%; height: 100%; object-fit: cover; }

.pfp-fallback-default { background: linear-gradient(135deg, #1e40af, #3b82f6); width: 100%; height: 100%; border-radius: 2px; }
.banner-fallback-default { background: linear-gradient(135deg, #cbd5e1, #93c5fd); width: 100%; height: 100%; }

/* --- HEADER FRAME --- */
#masthead {
    background: linear-gradient(to bottom, #ffffff 0%, #f4f8fb 50%, #e5eff8 100%);
    height: 56px; border-bottom: 1px solid #b8cbdc;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    box-shadow: 0 1px 4px rgba(28, 54, 84, 0.1);
}
.masthead-left, .masthead-right { display: flex; align-items: center; gap: 16px; }
.masthead-center { flex: 0 1 500px; }
#search-form { display: flex; width: 100%; }
#search-query { width: 100%; height: 30px; border-radius: 3px 0 0 3px; border-right: none; }
#search-btn {
    background: linear-gradient(to bottom, #fbfcfd 0%, #e5eef7 100%);
    border: 1px solid #b8cbdc; width: 65px; height: 30px; cursor: pointer; border-radius: 0 3px 3px 0;
}

/* Hamburger Icon Lines System */
#guide-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 2px;
}
#guide-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}
#guide-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background-color: #475569;
}
#playlists-container { width: 100%; }
body.dark-mode #guide-toggle span {
    background-color: #cbd5e1;
}
body.dark-mode #guide-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme-toggle-btn {
    background: linear-gradient(to bottom, #ffffff 0%, #ebf2fa 100%);
    border: 1px solid #b8cbdc; padding: 6px 10px; border-radius: 3px; cursor: pointer; font-weight: bold; color: #2c4a6f;
}
#logo { font-size: 20px; font-weight: bold; letter-spacing: -1px; text-shadow: 0 1px 0 #fff; }
.logo-text-black { color: #1c2d42; }
.logo-text-blue {
    background: linear-gradient(to bottom, #2575fc 0%, #1a5276 100%); color: #fff;
    padding: 2px 7px; border-radius: 3px; border: 1px solid #103a61; margin-left: 2px;
}

/* --- INTERACTIVE SUBSCRIPTION MODULES --- */
.yt-upload-btn, .yt-logout-btn {
    background: linear-gradient(to bottom, #ffffff 0%, #ebf2fa 100%); border: 1px solid #b8cbdc;
    padding: 6px 12px; font-weight: bold; color: #2c4a6f; cursor: pointer; border-radius: 2px;
}
.yt-login-trigger-btn, .yt-gradient-btn-blue, .yt-publish-btn {
    background: linear-gradient(to bottom, #3b82f6 0%, #1d4ed8 100%); color: white !important;
    padding: 6px 12px; font-weight: bold; border-radius: 2px; border: 1px solid #1e40af; cursor: pointer;
}
.yt-subscribe-btn {
    background: linear-gradient(to bottom, #e11d48 0%, #9f1239 100%); color: #fff;
    border: 1px solid #881337; padding: 6px 16px; font-weight: bold; font-size: 12px; border-radius: 3px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.yt-subscribe-btn.subscribed {
    background: linear-gradient(to bottom, #f1f5f9 0%, #cbd5e1 100%); color: #475569; border: 1px solid #94a3b8; text-shadow: none;
}
grid.dark-mode .yt-subscribe-btn.subscribed {
    background: linear-gradient(to bottom, #334155 0%, #1e293b 100%); color: #94a3b8; border: 1px solid #475569;
}
.header-user-pfp { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #b8cbdc; object-fit: cover; }

/* --- MAIN STRUCTURAL GRID PANELS --- */
#page-container { display: flex; margin-top: 56px; min-height: calc(100vh - 56px); }
#sidebar-guide { width: 240px; background: #f4f7fa; border-right: 1px solid #cfdce8; padding-top: 12px; flex-shrink: 0; }
.guide-section-title { padding: 6px 24px; font-weight: bold; color: #5a6f85; font-size: 11px; text-transform: uppercase; }
.guide-item { padding: 8px 24px; color: #405366; display: block; }
.guide-item:hover, .guide-item.active {
    background: linear-gradient(to right, #e3edf7, #d4e3f3); font-weight: bold; color: #0b3a6d; border-left: 3px solid #1d4ed8; padding-left: 21px;
}
.sidebar-sub-item { display: flex; align-items: center; gap: 8px; padding: 6px 24px; color: #405366; font-size: 12px; cursor: pointer; }
.sidebar-sub-item:hover { background: linear-gradient(to right, #e3edf7, #d4e3f3); color: #0b3a6d; }
.sidebar-sub-item img, .sidebar-sub-item .sub-pfp-fallback { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.guide-hr { border: 0; border-bottom: 1px solid #cfdce8; margin: 8px 0; }
#main-content { flex-grow: 1; padding: 24px; min-width: 0; }

/* --- CONTENT GRID & METADATA OVERLAYS --- */
.feed-title { font-size: 16px; margin-bottom: 16px; border-bottom: 1px solid #b8cbdc; padding-bottom: 8px; color: #1e3a5f; font-weight: normal; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.video-card { background: #ffffff; border: 1px solid #cbd6e2; border-radius: 4px; padding: 8px; cursor: pointer; }
.thumb-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid #b4c6d8; border-radius: 2px; overflow: hidden; }
.thumb-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.card-details { margin-top: 8px; position: relative; padding-left: 44px; }
.card-pfp-container { position: absolute; left: 0; top: 2px; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 1px solid #cbd6e2; }
.video-card-title { font-size: 13px; font-weight: bold; color: #1d4ed8; margin-bottom: 4px; line-height: 1.2; }
.card-channel { font-size: 11px; color: #334155; font-weight: bold; }
.card-meta { font-size: 11px; color: #64748b; margin-top: 2px; }

/* --- RETRO PROFILE / CHANNEL PANELS --- */
.channel-banner-space { width: 100%; height: 160px; border: 1px solid #b4c6d8; overflow: hidden; border-radius: 4px 4px 0 0; }
.channel-header-card { background: #ffffff; border: 1px solid #cbd6e2; border-top: none; padding: 20px; display: flex; gap: 20px; align-items: center; border-radius: 0 0 4px 4px; }
.channel-main-avatar { width: 64px; height: 64px; border: 1px solid #9cb4cc; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.channel-header-info { flex-grow: 1; min-width: 0; }
#channel-display-name { font-size: 20px; font-weight: normal; color: #1e293b; }
.channel-bio-text { font-size: 13px; color: #475569; margin-top: 4px; }
.channel-sub-count-text { font-size: 11px; color: #64748b; display: block; margin-top: 4px; }

/* --- FORM & ACCREDITATION DASHBOARDS --- */
.account-card-frame, .auth-box, .upload-box { background: #ffffff; border: 1px solid #cbd6e2; border-radius: 4px; padding: 30px; max-width: 600px; margin: 20px auto; }
.auth-box { max-width: 380px; } .upload-box { max-width: 750px; }
.account-card-frame h2, .auth-box h2 { font-size: 18px; color: #1e3a5f; margin-bottom: 16px; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px; font-weight: normal; }
.account-card-frame form, .auth-box form { display: flex; flex-direction: column; gap: 12px; }
.account-card-frame label, .auth-box label { font-weight: bold; color: #334155; }

/* --- MEDIA CONSOLE HUB --- */
.watch-container { display: flex; gap: 24px; max-width: 1280px; margin: 0 auto; }
.watch-main { flex: 1; min-width: 0; }
.player-canvas { width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid #1e293b; }
.player-canvas video { width: 100%; height: 100%; }
#video-title { font-size: 18px; font-weight: normal; margin: 12px 0; color: #0f172a; }
.video-metadata-panel { background: #ffffff; padding: 12px; border: 1px solid #cbd6e2; display: flex; justify-content: space-between; align-items: center; border-radius: 3px; }
.channel-block { display: flex; align-items: center; gap: 12px; }
.channel-avatar { width: 48px; height: 48px; border: 1px solid #cbd5e1; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.channel-name-link { font-weight: bold; font-size: 13px; color: #1d4ed8; cursor: pointer; margin-bottom: 4px; }
.view-count { font-size: 18px; color: #475569; }
.video-description-box { background: #ffffff; border: 1px solid #cbd6e2; border-top: none; padding: 16px 12px; color: #334155; line-height: 1.4; border-radius: 0 0 3px 3px; }
.upload-date { font-weight: bold; margin-bottom: 6px; color: #0f172a; }

.watch-sidebar { width: 380px; flex-shrink: 0; }
.up-next-title { font-size: 13px; font-weight: bold; color: #1e3a5f; margin-bottom: 12px; }
.suggestions-list { display: flex; flex-direction: column; gap: 8px; }
.suggested-item { display: flex; gap: 8px; background: #fff; border: 1px solid #cbd6e2; padding: 6px; border-radius: 3px; }
.suggested-thumb { width: 120px; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 2px; flex-shrink: 0; }
.suggested-thumb img { width: 100%; height: 100%; object-fit: cover; }
.suggested-meta-title { font-size: 13px; font-weight: bold; color: #1d4ed8; margin-bottom: 2px; cursor: pointer; }
.suggested-channel { font-size: 11px; font-weight: bold; color: #334155; }
.suggested-views { font-size: 11px; color: #64748b; }
.upload-dropzone { border: 2px dashed #93c5fd; background: #f8fafc; padding: 30px; text-align: center; margin-bottom: 20px; }
.upload-arrow { font-size: 32px; color: #93c5fd; display: block; }

/* --- RETRO COMMENT MODULE CONFIGURATIONS --- */
.comments-section {
    margin-top: 16px;
    background: #ffffff;
    border: 1px solid #cbd6e2;
    padding: 16px;
    border-radius: 3px;
}
.comments-section h3 {
    font-size: 14px;
    margin-bottom: 12px;
    color: #1e3a5f;
}
#comment-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
#comment-input {
    width: 100%;
    resize: vertical;
    min-height: 54px;
}
.comment-form-actions {
    display: flex;
    justify-content: flex-end;
}
.comment-box-prompt {
    padding: 10px;
    background: #f4f7fa;
    border: 1px solid #cbd6e2;
    border-radius: 3px;
    margin-bottom: 16px;
    color: #475569;
}
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.comment-item {
    display: flex;
    gap: 12px;
}
.comment-avatar-container {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #cbd6e2;
    flex-shrink: 0;
    cursor: pointer;
}
.comment-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.comment-pfp-fallback {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    width: 100%;
    height: 100%;
}
.comment-content-box {
    flex-grow: 1;
    min-width: 0;
}
.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.comment-author {
    font-weight: bold;
    color: #1d4ed8;
    cursor: pointer;
}
.comment-author:hover {
    text-decoration: underline;
}
.comment-timestamp {
    font-size: 11px;
    color: #64748b;
}
.comment-text {
    font-size: 13px;
    color: #2b3a4a;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- HIGH CONTRAST DARK MODE OVERRIDES --- */
body.dark-mode { background-color: #0f172a; color: #cbd5e1; }
body.dark-mode #masthead { background: linear-gradient(to bottom, #1e293b 0%, #111827 100%); border-bottom-color: #334155; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
body.dark-mode .logo-text-black { color: #f8fafc; }
body.dark-mode #sidebar-guide { background: #111827; border-right-color: #334155; }
body.dark-mode .guide-item, body.dark-mode .sidebar-sub-item { color: #94a3b8; }
body.dark-mode .guide-item:hover, body.dark-mode .guide-item.active { background: linear-gradient(to right, #1e293b, #334155); color: #38bdf8; }
body.dark-mode .sidebar-sub-item:hover { background: linear-gradient(to right, #1e293b, #334155); color: #38bdf8; }
body.dark-mode .guide-hr { border-bottom-color: #334155; }
body.dark-mode .theme-toggle-btn, body.dark-mode .yt-upload-btn, body.dark-mode .yt-logout-btn { background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%); border-color: #475569; color: #cbd5e1; }
body.dark-mode #search-btn { background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%); border-color: #475569; color: #fff; }
body.dark-mode .video-card, body.dark-mode .channel-header-card, body.dark-mode .account-card-frame, body.dark-mode .auth-box, body.dark-mode .upload-box, body.dark-mode .video-metadata-panel, body.dark-mode .video-description-box, body.dark-mode .suggested-item {
    background: #1e293b; border-color: #334155; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
body.dark-mode input[type="text"], body.dark-mode input[type="password"], body.dark-mode textarea { background: #0f172a; border-color: #475569; color: #f8fafc; }
body.dark-mode .feed-title { color: #f8fafc; border-bottom-color: #334155; }
body.dark-mode #channel-display-name, body.dark-mode #video-title, body.dark-mode .upload-date, body.dark-mode .up-next-title { color: #f8fafc; }
body.dark-mode .video-card-title, body.dark-mode .channel-name-link, body.dark-mode .suggested-meta-title { color: #38bdf8; }
body.dark-mode .card-channel, body.dark-mode .suggested-channel { color: #94a3b8; }
body.dark-mode .card-meta, body.dark-mode .suggested-views, body.dark-mode .view-count, body.dark-mode .channel-bio-text, body.dark-mode .guide-section-title, body.dark-mode .channel-sub-count-text { color: #64748b; }
body.dark-mode .upload-dropzone { background: #111827; border-color: #334155; }

/* Dark Mode Comments Intersections */
body.dark-mode .comments-section { background: #1e293b; border-color: #334155; }
body.dark-mode .comments-section h3 { color: #f8fafc; }
body.dark-mode .comment-box-prompt { background: #111827; border-color: #334155; color: #94a3b8; }
body.dark-mode .comment-avatar-container { border-color: #334155; }
body.dark-mode .comment-author { color: #38bdf8; }
body.dark-mode .comment-timestamp { color: #64748b; }
body.dark-mode .comment-text { color: #cbd5e1; }

/* --- RESPONSIVE MOBILE OVERHAUL VIEWPORT --- */
@media (max-width: 768px) {
    #page-container { flex-direction: column; }
    
    /* Transforms sidebar configuration into an off-canvas slide-out drawer overlay */
    #sidebar-guide {
        position: fixed;
        top: 56px;
        left: -242px;
        bottom: 0;
        z-index: 1001;
        background: #f4f7fa;
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.15);
        transition: left 0.18s ease-in-out;
        display: block !important;
        height: calc(100vh - 56px);
    }
    #sidebar-guide.mobile-open {
        left: 0;
    }
    body.dark-mode #sidebar-guide {
        background: #111827;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5);
        border-right-color: #334155;
    }

    /* Prevent structural masthead elements from overlapping */
    #masthead { padding: 0 8px; gap: 6px; }
    .masthead-left { gap: 6px; }
    .masthead-right { gap: 6px; }
    #logo { font-size: 16px; }
    
    /* Allow the search component layout block to fluidly drop down size width */
    .masthead-center { flex: 1; min-width: 0; margin: 0 4px; }
    #search-query { height: 28px; padding: 4px 6px; }
    #search-btn { width: 42px; height: 28px; }
    
    /* Save header pixel room by stripping label text strings from active links */
    .header-user-link b { display: none; }
    .theme-toggle-btn, .yt-upload-btn, .yt-logout-btn, .yt-login-trigger-btn { padding: 4px 6px; font-size: 11px; }

    /* Fix the card rows so they use a clean responsive grid grid instead of massive stretched columns */
    #main-content { padding: 12px; }
    .video-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

    /* Optimize video workspace architecture */
    .watch-container { flex-direction: column; gap: 16px; }
    .watch-sidebar { width: 100%; }
    #video-title { font-size: 14px; margin: 8px 0; }
    .video-metadata-panel { flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px; }
    .stats-block { width: 100%; text-align: left; border-top: 1px dashed #cbd6e2; padding-top: 8px; }
    body.dark-mode .stats-block { border-top-color: #334155; }
    .view-count { font-size: 14px; }

    /* Compress user channel identities */
    .channel-banner-space { height: 90px; }
    .channel-header-card { flex-direction: column; text-align: center; gap: 12px; padding: 12px; }
    
    /* Format layout boxes neatly inside narrow screens */
    .account-card-frame, .auth-box, .upload-box { padding: 16px; margin: 8px auto; width: 100%; }
}