* {
    box-sizing: border-box;
}

:root {
    --bg-color: white;
    --box-shadow-color: rgba(0, 0, 0, 0.1);
    --text-color: black;
    --search-bg: #f5f5f5;
    --search-text: #000;
    --question-title-color: #333;
    --badge-bg-color: #e0e0e0;
    --badge-text-color: #000;
    --badge-border-color: #333;
    --question-border-color: #ddd;
}

[data-bs-theme="dark"] {
    --bg-color: #02131b;
    --box-shadow-color: rgba(0, 0, 0, 0.1);
    --text-color: white;
    --search-bg: #02131b;
    --search-text: #fff;
    --question-title-color: #ddd;
    --badge-bg-color: #15314b;
    --badge-text-color: #fff;
    --badge-border-color: #001528;
    --question-border-color: #15314b;
}

.problem-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--question-border-color);
    background-color: var(--bg-color);
}

.problem-list-problem-title a {
    color: var(--question-title-color);
}

.problem-list-problem-points {
    color: var(--question-title-color);
}

.problem-list-problem-difficulty {
    display: inline-flex;
    padding: 2px 6px;
    margin: 2px;
    border-radius: 5px;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--badge-bg-color) !important;
    color: var(--badge-text-color) !important;
    border: 1px solid var(--badge-border-color) !important;
}

.problem-list-problem {
    border-bottom: 2px solid var(--question-border-color);
}

.problem-details {
    display: flex; /* Default: visible */
}

    .problem-details.hidden {
        display: none !important; /* Ensure visibility is toggled */
    }

.toggle-details-btn svg:nth-child(2) {
    display: none; /* Hide the second SVG by default */
}

.toggle-details-btn.show-details svg:nth-child(1) {
    display: none; /* Hide the first SVG when details are shown */
}

.toggle-details-btn.show-details svg:nth-child(2) {
    display: inline; /* Show the second SVG when details are shown */
}

.toggle-details-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-details-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

#bd-theme {
    border-bottom: 2px solid transparent;
    top: 5px;
}

header ol,
header ul {
    padding: 0;
    margin: 0;
}

.break-point::before {
    content: "\a";
    white-space: pre;
}

/* Fade image in after load */
.lazyload,
.lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}

/* Breadcrumb Styles */
.breadcrumb-light {
    padding-top: 0;
    margin-top: 0;
    background: transparent;
    padding: 5px;
    margin-bottom: 20px;
    list-style: none;
}

    .breadcrumb-light > li {
        display: inline-block;
    }

        .breadcrumb-light > li + li:before {
            padding: 0 5px;
            color: #2c2a2a;
            content: "/\00a0";
        }

    .breadcrumb-light li a {
        color: #0d6efd;
    }

        .breadcrumb-light li a:hover {
            color: #2c2a2a;
        }

    .breadcrumb-light li.active {
        color: #2c2a2a;
    }

.breadcrumb-dark {
    padding-top: 0;
    margin-top: 0;
    background: transparent;
    padding: 5px;
    margin-bottom: 20px;
    list-style: none;
}

    .breadcrumb-dark > li {
        display: inline-block;
    }

        .breadcrumb-dark > li + li:before {
            padding: 0 5px;
            color: #dddddd;
            content: "/\00a0";
        }

    .breadcrumb-dark li a {
        color: #f8be10;
    }

        .breadcrumb-dark li a:hover {
            color: #dddddd;
        }

    .breadcrumb-dark li.active {
        color: #dddddd;
    }

/* Navigation Base Styles */
.navbar-nav > li > a:hover {
    background: none;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background-color: transparent;
}

.dropdown-menu > li > a {
    padding: 5px 15px;
}

.top-menu-icon {
    position: absolute;
    right: 0;
}

#mainmu > .dropdown {
    position: relative;
    display: inline-block;
}

/* Cart Counter */
.cart-icon-container {
    position: relative;
}

.cart_Counter {
    background-color: #ec5252;
    border-radius: 50%;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.43;
    padding: 0 4px;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
    top: -1px;
    left: 5px;
    width: 16px;
    height: 16px;
    justify-content: center;
    display: flex;
}

/* Notifications Window */
.notifications {
    display: none;
    width: 300px;
    position: absolute;
    top: 40px;
    right: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 3px 6px 0 #e5e3e3;
}

    .notifications:before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        color: transparent;
        border: 10px solid #ccc;
        border-color: transparent #fff;
        margin-top: -20px;
        margin-right: 10px;
        float: right;
    }

/* Buttons */
.getintouch_btn {
    color: #2d6fde;
    border: 1px solid #2d6fde;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    border-radius: 3px;
    padding: 3px 7px !important;
    position: relative;
    display: inline-block !important;
    top: 11px;
    margin-top: -6px;
}

.btn-outline-primary {
    color: #0d6efd;
    border-color: #0d6efd;
    font-size: 14px;
    padding: 5px 10px;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

/* Menu Icons and Arrows */
.wsmenu-arrow {
    color: #645e5e !important;
    line-height: 3;
}

.wsmenu-list li:hover span svg {
    transform: rotate(180deg);
    transition: .3s ease-out;
}

.badge {
    border-radius: 2px;
    font-weight: normal;
    font-size: 10px !important;
    padding: 4px;
}

/* Dropdown Containers */
#livetraining {
    width: 580px !important;
    border: none;
}

#course {
    width: 590px !important;
    border: none;
    min-height: 380px;
}

#courseContainer {
    min-height: 380px;
}

.course-library {
    width: 240px;
}

.menu-container {
    width: 300px !important;
    padding: 5px !important;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

@media (max-width: 800px) {
    .course-library {
        width: unset;
    }
}

/* Membership Dropdown Lists */
ul.menulist {
    margin-left: 18px;
    min-height: 260px;
}

    ul.menulist li {
        list-style-type: disc;
        background: none;
        font-size: 14px;
        padding: 4px 0;
        color: #666666;
    }

        ul.menulist li:hover {
            background: none !important;
            color: #0d6efd;
        }

/* Icon Sizes */
img.icon28 {
    width: 28px;
    height: 28px;
}

img.icon20 {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

img.icon16 {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Category and Course Menus */
li.category-course,
li.subcategory-course {
    border-bottom: 1px solid #eae5e5;
}

li.subcategory-course {
    padding: 4px 0;
}

.subcategory-course:hover {
    color: #00baf2;
}

.category-container {
    color: #000;
    background: #fff;
    padding: 0;
    font-size: 15px;
}

    .category-container > ul {
        list-style: none;
        padding-left: 0;
    }

.category-list {
    cursor: pointer;
    padding: 8px 8px;
    border-bottom: 1px solid #dedede;
    text-align: left;
}

.active-category-list {
    background: #f6f6f6;
}

    .active-category-list:hover {
        background: #f6f6f6;
        border-bottom: 1px solid rgba(232, 231, 231, 0.78);
    }

.category-course-container {
    color: #000;
    float: left;
    font-size: 15px;
}

    .category-course-container > ul {
        list-style: none;
        padding-left: 0;
    }

.category-course {
    cursor: pointer;
    padding: 4px 0;
    text-align: left;
}

.active-category-course {
    color: #16a6e8;
}

    .active-category-course > .category-course-caret {
        display: inline !important;
    }

.active-category-list > .category-list-caret {
    display: inline !important;
}

.category-course-anchor {
    text-decoration: none !important;
    color: #000;
}

    .category-course-anchor:hover {
        text-decoration: none !important;
        color: #4588ed;
    }

.menu-small-text {
    position: absolute;
    top: 16px;
    color: #f44336;
    font-size: 11px;
}

@media (max-width: 768px) {
    .menu-small-text {
        top: 24px;
    }
}

/* Desktop Navigation */
.wsmenucontainer {
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .wsmenucontainer {
    background-color: rgb(5 24 44);
    border-bottom-color: #374151;
}


.pd-header {
    padding-top: 0;
    padding-bottom: 0;
}


.pd-header .    problem-navtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: #4b5563;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

[data-bs-theme="dark"] .pd-header .problem-navtoggle {
    color: #d1d5db;
}

.pd-header .problem-navtoggle:hover {
    color: #0891b2;
    background-color: #f3f4f6;
}

[data-bs-theme="dark"] .pd-header .problem-navtoggle:hover {
    color: #0ea5e9;
    background-color: #1e293b;
}

.problem-navigator{
    margin-left:5px;
    margin-right:5px;
    cursor:pointer;
    font-size: 14px;
}

.wsmenu {
    color: #fff;
    position: relative;
    font-size: 14px;
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 auto;
    width: 100%;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.wsmenu-list {
    margin: 0 auto;
    display: table;
    padding: 0;
}

    .wsmenu-list > li {
        text-align: center;
        display: table-cell;
        white-space: nowrap;
    }

        .wsmenu-list > li > a {
            display: block;
            color: #424242;
            padding: 0 8px;
            line-height: 48px;
            text-decoration: none;
            position: relative;
            border-bottom: 2px solid transparent;
        }

        .wsmenu-list > li:hover > a {
            background-color: unset !important;
            text-decoration: none;
            color: #0b0b0b;
            border-bottom: 2px solid #00baf2;
        }

    .wsmenu-list li a .arrow:after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        content: "";
        float: right;
        height: 0;
        margin: 0 0 0 9px;
        position: absolute;
        text-align: right;
        top: 22px;
        width: 0;
    }

    .wsmenu-list li a:hover .arrow:after,
    .wsmenu-list li a.active .arrow:after {
        background-color: #fff;
        border-bottom-color: #ff8c00;
    }

/* Problem List Menu */
.wsmenubaricon {
    margin-top:6px;
    display: inline-block;
    padding: 6px;
    font-size: 16px;
    cursor: pointer;
    color:var(--text-color)
}

.problem-menu {
    width: 420px;
    left: -420px;
    height: 100%;
    position: fixed;
    top: 0;
    margin: 0;
    background-color: #fff;
    border-radius: 0;
    z-index: 4000; /* above the fixed header (999) */
    transition: left 0.35s ease-in-out;
    border: none;
}

.wsoffcanvasopener .problem-menu {
    left: 0;
}

/* redesigned panel: pin head/search, only the list scrolls */
.problem-menu.pl-panel {
    display: flex;
    flex-direction: column;
}

    .problem-menu.pl-panel .pl-head,
    .problem-menu.pl-panel .pl-search {
        flex: none;
    }

    .problem-menu.pl-panel .pl-list {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .problem-menu.pl-panel .pl-close {
        flex: none;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
    }

/* MOBILE: slide in from the RIGHT (top-right trigger) */
@media (max-width: 991px) {
    .problem-menu {
        width: min(88vw, 380px);
        left: auto;
        right: -100vw; /* hidden off right edge */
        transition: right 0.35s ease-in-out;
    }

    .wsoffcanvasopener .problem-menu {
        left: auto;
        right: 0;
    }
}

.problem-label {
    color: var(--text-color);
    cursor: pointer;
    font-size: 16px;
    margin-right: 10px;
    margin-top:14px;
}

.left-problem-navigator {
    color: var(--text-color);
    cursor: pointer;
    margin-right: 10px;
    margin-top: 14px;
}

.right-problem-navigator {
    color: var(--text-color);
    cursor: pointer;
    margin-right: 10px;
    margin-top: 14px;
}

.problem-navtoggle {
    height: 100%; /* Or fixed height like 40px */
}

.problem-list {
    height: 100%;
    overflow-y: auto;
    display: block;
    background-color: var(--bg-color);
}

    .problem-list > li {
        width: 100%;
        display: block;
        border-right: none;
        background-color: transparent;
        position: relative;
        white-space: inherit;
    }

        .problem-list > li > a {
            display: block;
            padding: 5px 32px 5px 16px;
            text-align: left;
            color: var(--text-color);
            background-color: var(--bg-color);
            line-height: 28px;
            border-bottom: 1px solid rgba(0, 0, 0, .13);
            text-decoration: none;
        }

        .problem-list > li:hover > a {
            background-color: rgba(0, 0, 0, 0.08);
            color: #0d6efd;
        }

.overlapblackbg {
    left: 0;
    z-index: 3999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    display: none;
}

.wsoffcanvasopener .overlapblackbg {
    display: block !important;
}

/* Submenu Animation */
.wsmenu-list li > .wsmenu-submenu {
    transform-style: preserve-3d;
    transform: rotateX(-75deg);
    visibility: hidden;
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}

.wsmenu-list li:hover > .wsmenu-submenu {
    transform: rotateX(0deg);
    opacity: 1;
    visibility: visible;
    display: block !important;
}

.wsmenu-submenu {
    position: absolute;
    z-index: 1000;
    margin: 0;
    padding: 0;
    background-color: rgba(232, 231, 231, 0.78);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

    .wsmenu-submenu li {
        position: relative;
        margin: 0;
        padding: 0;
        display: block;
    }

        .wsmenu-submenu li a {
            background: #fff;
            color: #666666;
            text-align: left;
            display: block;
            font-size: 1rem;
            padding: 8px 12px;
            text-transform: none;
            letter-spacing: normal;
            border-bottom: 1px solid #e2dfdf !important;
            border-radius: 0;
        }

            .wsmenu-submenu li:hover,
            .wsmenu-submenu li a:hover {
                background: #f6f6f6;
            }

        /* Sub-submenu */
        .wsmenu-submenu li > .wsmenu-submenu-sub {
            transform-style: preserve-3d;
            transform: rotateX(-75deg);
            visibility: hidden;
            opacity: 0;
            transition: transform 0.4s, opacity 0.4s;
            min-width: 220px;
            position: absolute;
            left: 100%;
            top: 0;
            margin: 0;
            padding: 0;
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        }

        .wsmenu-submenu li:hover > .wsmenu-submenu-sub {
            transform: rotateX(0deg);
            opacity: 1;
            visibility: visible;
            background-color: #f6f6f6;
            display: block !important;
        }

.wsmenu-submenu-sub li > .wsmenu-submenu-sub-sub {
    transform-style: preserve-3d;
    transform: rotateX(-75deg);
    visibility: hidden;
    opacity: 0;
    transition: transform 0.4s, opacity 0.4s;
    min-width: 220px;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    padding: 0;
}

.wsmenu-submenu-sub li:hover > .wsmenu-submenu-sub-sub {
    transform: rotateX(0deg);
    opacity: 1;
    visibility: visible;
    background-color: #fff;
    border: 1px solid #f6f6f6;
    display: block !important;
}

/* Logo and Branding */
#logo-link {
    background: none !important;
    border: none;
    padding-left: 0;
}

.logo {
    display: none;
    height: 32px;
    margin-top: -4px;
}

.bydnt {
    font-size: 10px;
    padding-left: 62px;
    margin-top: -18px;
    letter-spacing: 0.12em;
    color: #001a2e;
}

.bydnt-mobile {
    font-size: 10px;
    padding-left: 78px;
    margin-top: -14px;
    letter-spacing: 0.12em;
    color: #001a2e;
}

/* Theme Toggle */
.navbar-btn {
    background: none;
    border: none;
    padding: 0 8px;
}

.nav-icon {
    width: 22px;
    height: 22px;
}

/* Responsive Desktop Adjustments */


.platform .picon {
    vertical-align: top;
    font-size: 20px;
    display: inline-block;
}

.platform .picon-text {
    line-height: 17px;
    padding-left: 6px;
    display: inline-block;
}

    .platform .picon-text > span {
        font-size: 11px
    }

/* Animation for Spinners */
.glyphicon-refresh-animate {
    animation: spin .7s infinite linear;
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

/* Modal Z-Index */
.modal-open .modal,
.modal {
    z-index: 9999999999;
}

@media only screen and (max-width: 780px) {

    .problem-label {
        display:none;
    }
    .left-problem-navigator {
        display:none;
    }
    .right-problem-navigator {
        display:none;
    }
}

@media (max-width: 991px) {
    .hide-mobile-tablet {
        display: none !important;
    }
    #problem-search {
        display: none !important
    }
}

/* Search Bar Container */
.search-container {
    position: relative;
    width: 300px; /* Adjust width as needed */
    margin-top: 5px;
    margin-left:20px;
}

#problem-search {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #02131b; /* Dark background like in the image */
    color: #fff; /* White text */
    outline: none;
}

    #problem-search::placeholder {
        color: #aaa; /* Placeholder text color */
    }

/* Search Results Dropdown */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background-color: #02131b; /* Dark background */
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none; /* Hidden by default */
}

    .search-results a {
        display: block;
        padding: 10px 12px;
        color: #fff; /* White text */
        text-decoration: none;
        font-size: 14px;
        text-align:left;
        white-space:nowrap;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

        .search-results a:hover {
            background-color: #333; /* Slightly lighter background on hover */
        }

    /* Show dropdown when active */
    .search-results.active {
        display: block;
    }


#problem-search {
    background-color: var(--search-bg);
    color: var(--search-text);
}

.search-results {
    background-color: var(--search-bg);
}

    .search-results a {
        color: var(--search-text);
    }
/* One trigger per breakpoint */
.pl-trigger {
    display: none !important;
}

@media (max-width: 991px) {
    .problem-header {
        display: none !important;
    }
    /* hide logo-side trigger */
    .pl-trigger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 6px;
    }
}
/* =====================================================================
   Problem List Panel — complete styles (positioning + visual)
   Off-canvas drawer: left on desktop, right on mobile, above the header.
   ===================================================================== */

/* ---------- Trigger visibility: one per breakpoint ---------- */
.pl-trigger {
    display: none !important;
}
/* hidden on desktop */

@media (max-width: 991px) {
    .problem-header {
        display: none !important;
    }
    /* hide logo-side trigger */
    .pl-trigger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 6px;
    }
}

/* ---------- Drawer shell / off-canvas positioning ---------- */
.problem-menu.pl-panel {
    position: fixed;
    top: 0;
    left: -420px; /* hidden off the left edge */
    width: 420px;
    height: 100%;
    margin: 0;
    z-index: 4000; /* above the fixed site header (999) */
    display: flex;
    flex-direction: column;
    background: var(--pd-surface, #fff);
    color: var(--pd-ink-2, #334155);
    font-family: var(--pd-sans, "Inter", system-ui, sans-serif);
    border: none;
    transition: left 0.35s ease-in-out;
}

.wsoffcanvasopener .problem-menu.pl-panel {
    left: 0;
}

/* overlay sits above the header, below the panel */
.overlapblackbg {
    z-index: 3999 !important;
}

/* MOBILE: slide in from the RIGHT (top-right trigger) */
@media (max-width: 991px) {
    .problem-menu.pl-panel {
        width: min(88vw, 380px);
        left: auto;
        right: -100vw; /* hidden off the right edge */
        transition: right 0.35s ease-in-out;
        box-shadow: -12px 0 40px rgba(2,20,35,.25);
    }

    .wsoffcanvasopener .problem-menu.pl-panel {
        left: auto;
        right: 0;
    }
}

/* ---------- Header row (pinned) ---------- */
.pl-head {
    flex: none;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--pd-surface-2, #f8fafc);
    border-bottom: 1px solid var(--pd-border, #e2e8f0);
}

.pl-head__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pd-ink, #0f172a);
}

.pl-head__ic {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--pd-brand-tint, #ecfeff);
    color: var(--pd-brand-ink, #0e7490);
    flex: none;
}

    .pl-head__ic svg {
        display: block;
    }

.pl-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--pd-brand-ink, #0e7490);
    background: var(--pd-brand-tint, #ecfeff);
    border-radius: 999px;
    padding: 2px 9px;
    margin-left: 2px;
}

.pl-close {
    appearance: none;
    border: 1px solid var(--pd-border, #e2e8f0);
    cursor: pointer;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--pd-surface, #fff);
    color: var(--pd-muted, #64748b);
    transition: .15s;
}

    .pl-close:hover {
        color: var(--pd-hard, #dc2626);
        border-color: var(--pd-hard, #dc2626);
        background: var(--pd-hard-bg, #fee2e2);
    }

/* ---------- Search (pinned) ---------- */
.pl-search {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pd-border-soft, #eef2f6);
}

    .pl-search svg {
        position: absolute;
        left: 24px;
        color: var(--pd-faint, #94a3b8);
        pointer-events: none;
    }

    .pl-search input {
        width: 100%;
        border: 1px solid var(--pd-border, #e2e8f0);
        border-radius: 9px;
        padding: 9px 12px 9px 34px;
        font-size: 13.5px;
        color: var(--pd-ink, #0f172a);
        background: var(--pd-surface-2, #f8fafc);
        outline: none;
        transition: .15s;
    }

        .pl-search input:focus {
            border-color: var(--pd-brand, #0891b2);
            background: var(--pd-surface, #fff);
        }

/* ---------- List (the only scroll area) ---------- */
.pl-list {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
}

.pl-item + .pl-item {
    margin-top: 2px;
}

.pl-item__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .14s;
}

    .pl-item__link:hover {
        background: var(--pd-surface-3, #f1f5f9);
    }

.pl-item.is-current > .pl-item__link {
    background: var(--pd-brand-tint, #ecfeff);
    box-shadow: inset 3px 0 0 var(--pd-brand, #0891b2);
}

.pl-item__id {
    flex: none;
    width: 30px;
    text-align: center;
    padding-top: 1px;
    font-family: var(--pd-mono, ui-monospace, monospace);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pd-faint, #94a3b8);
}

.pl-item.is-current .pl-item__id {
    color: var(--pd-brand-ink, #0e7490);
}

.pl-item__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pl-item__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pd-ink, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.pl-item__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.pl-diff {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: capitalize;
    padding: 2px 9px;
    border-radius: 999px;
}

    .pl-diff.is-easy {
        color: var(--pd-easy, #059669);
        background: var(--pd-easy-bg, #d1fae5);
    }

    .pl-diff.is-medium {
        color: var(--pd-med, #d97706);
        background: var(--pd-med-bg, #fef3c7);
    }

    .pl-diff.is-hard,
    .pl-diff.is-expert {
        color: var(--pd-hard, #dc2626);
        background: var(--pd-hard-bg, #fee2e2);
    }

.pl-pts {
    font-size: 11.5px;
    color: var(--pd-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.pl-item__co {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pl-co {
    font-size: 10.5px;
    color: var(--pd-ink-2, #334155);
    background: var(--pd-surface-3, #f1f5f9);
    border: 1px solid var(--pd-border-soft, #eef2f6);
    padding: 1px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.pl-co--more {
    color: var(--pd-brand-ink, #0e7490);
    background: var(--pd-brand-tint, #ecfeff);
    border-color: transparent;
}

/* ---------- Dark theme ---------- */
[data-bs-theme="dark"] .problem-menu.pl-panel {
    background: var(--pd-surface, #001528);
}