/* ============================================================
   CB CYBERPUNK — light.css
   "Cyber Day" variant — slightly brighter surfaces, same neon.
   Applied when user explicitly picks "light mode".
   ============================================================ */

html.light {
    --color-main-01   : #c4006a;      /* deeper magenta for light bg */
    --color-main-02   : #fff0f8;
    --color-01        : #1c1c3a;
    --color-02        : #d0caff;
    --color-03        : #2e2e55;
    --color-04        : #8080b0;
    --color-05        : #14142e;
    --color-header-search-category : #22224a;
    --color-header-search          : #1c1c3a;
    --color-footer-dropdown        : #22224a;
    --color-background             : #111128;

    --cyber-cyan           : #00c8e0;
    --cyber-glow-pink      : 0 0 8px #c4006a66, 0 0 20px #c4006a33;
    --cyber-glow-cyan      : 0 0 8px #00c8e066, 0 0 20px #00c8e033;
    --cyber-border         : 1px solid #c4006a44;
    --border-radius        : 6px;
    --generic-box-shadow   : 0 6px 28px 0 rgba(0, 0, 0, 0.70);
    --slim-box-shadow      : 0 3px 14px 0 rgba(0, 0, 0, 0.60);
    --color-gradient-start : #1c1c3a;
    --color-gradient-end   : #141430;
    --background-gradient  : linear-gradient(160deg, #1c1c3a, #141430);

    body {
        background-color: var(--color-background);
        background-image:
            radial-gradient(ellipse at 10% 80%, rgba(196, 0, 106, 0.05) 0%, transparent 55%),
            radial-gradient(ellipse at 90% 10%, rgba(0, 200, 224, 0.04) 0%, transparent 45%);
    }

    #header {
        box-shadow: 0 2px 20px rgba(196, 0, 106, 0.18),
                    0 1px 0 rgba(196, 0, 106, 0.25);
    }
    #header .search input[type="text"] {
        background-color: var(--color-gradient-end);
    }

    .breadcrumb           { border-radius: var(--border-radius); }
    .well                 { border-radius: var(--border-radius); background: var(--background-gradient); }
    .cb-box               { border-radius: var(--border-radius); }
    .alert-success h2     { color: var(--color-01); }
    .default_bootstrap.nav-tabs.nav > li > a {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .sidebar-channels,
    .sidebar-items,
    .sidebar-playlists .playlist,
    .playlist-item .playlist-thumb .playlist-info {
        border-radius: var(--border-radius);
        background: var(--background-gradient);
    }
    .sidebar-playlists .playlist img,
    .sidebar-items .collection-item img,
    .sidebar-items .featured-video img,
    .sidebar-items .item-photo .photo-holder img { border-radius: var(--border-radius); }
    .sidebar-items .item-photo .photo-holder::after { border-radius: var(--border-radius); }

    #featured_vid_sec .item-video .video-link img,
    .cb-popup-container .player-holder .vjs-big-play-button { border-radius: var(--border-radius); }
    .cb-popup-container .video-js { border-radius: var(--border-radius); overflow: hidden; }

    :not(#featured_vid_sec) .item-video .video-link img {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }
    :not(#featured_vid_sec) .item-video .video-info {
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        background: var(--background-gradient);
    }

    .signin-block .user-form, .forgot-block .user-form {
        border-radius: var(--border-radius);
        background: var(--background-gradient);
    }
    .signin-block .side-box {
        border-radius: var(--border-radius);
        background: linear-gradient(160deg, #220035, #160025);
        box-shadow: var(--cyber-glow-pink), var(--generic-box-shadow);
    }
    .signup-block .user-form { border-radius: var(--border-radius); background: var(--background-gradient); }

    .item-channel .channel-holder { border-radius: var(--border-radius); }
    .item-channel .channel-holder .user-block {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }
    .item-channel .info { background: var(--background-gradient); }

    .playlist.featured-video.active {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }
    .video-details {
        background: var(--background-gradient);
        border-radius: var(--border-radius);
        box-shadow: var(--generic-box-shadow);
    }
    #cb_player .video-js {
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: 0 0 30px rgba(196, 0, 106, 0.20);
    }

    .cover .profile-buttons {
        background: var(--background-gradient);
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
    .channel-tabs { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }

    .item-photo .photo-info {
        background: var(--background-gradient);
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
    .item-photo .photo-holder {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        overflow: hidden;
    }
    #gallery, .view-details { border-radius: var(--border-radius); }

    .comments-block { border-radius: var(--border-radius); box-shadow: var(--generic-box-shadow); }
    .collections .title { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
    .collections .photo-block a { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); overflow: hidden; }
    .fav-repo { border-radius: var(--border-radius); }

    .quicklist_box {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }
    .quicklist_box .qlist_item .pl_thumb img { border-radius: var(--border-radius); }

    .manage-page .nav-pills > li:first-child,
    .manage-page .nav-pills > li:first-child a {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }
    .manage-page .nav-pills > li:last-child,
    .manage-page .nav-pills > li:last-child a {
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
    .manage-page .accountprofile img { border-radius: var(--border-radius); }

    .item-video:not(:has(.slider-video-container))::after,
    .item-photo::after, .item-channel::after,
    .collection-item::after, #coverContainer::after {
        content: "";
        position: absolute;
        box-shadow: 0 16px 28px 0 rgba(196, 0, 106, 0.12);
        left: 12px; width: calc(100% - 24px); bottom: 10px; height: 33px; z-index: -1;
    }
    .sidebar-items, .sidebar-channels, .sidebar-playlists .playlist,
    .signin-block .side-box, .signin-block .user-form,
    .forgot-block .user-form, .cb-box { box-shadow: var(--generic-box-shadow); }

    @media only screen and (max-width: 767px) {
        #header .menu-holder .col .main-links ul li.active a,
        #header .menu-holder .col .main-links ul li a:hover { border-radius: var(--border-radius); }
        .filter-dropdowns .dropdown { border-radius: var(--border-radius); }
    }

    .default-slider .slider-container .item-video { border-radius: var(--border-radius); background-color: transparent; }
    .slider-container-action .item-video::after   { content: none; }
    .slider-video-container .thumb-video-padding a.thumb-video { background: var(--background-gradient); }
    .slider-video-container .thumb-video-padding + .shadow {
        box-shadow: rgba(0,0,0,0.75) 0px 25px 20px -20px;
        width: 100%; height: calc(var(--height) - 5px);
        display: block; z-index:-1; position: absolute; top: 0; left: 0;
    }
    .slider-container-featured { box-shadow: 0 0 40px rgba(196, 0, 106, 0.18); }

    .toastui-editor-contents p          { color: var(--color-02); }
    #updateVideoInfo .formSection h4    { border-radius: var(--border-radius); }

    ::selection { background: rgba(196, 0, 106, 0.30); color: #fff; }
}