/* ── Dual-Tab Drawer ───────────────────────────────── */
.yd-drawer-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-surface-2);
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
}
.yd-tab-btn {
    flex: 1;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-text-2);
    background: var(--clr-surface);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
    letter-spacing: .01em;
}
.yd-tab-btn:hover {
    border-color: var(--clr-primary-200);
    color: var(--clr-primary);
    background: var(--clr-primary-50);
}
.yd-tab-btn.active {
    color: #fff;
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    box-shadow: 0 4px 12px rgba(var(--clr-primary-rgb),.32);
}
.yd-tab-btn.active:hover { color: #fff; background: var(--clr-primary); }
.yd-tab-btn i { font-size: 13px; }
.yd-tab-count {
    font-size: 10px;
    font-weight: 800;
    background: var(--clr-primary-100);
    color: var(--clr-primary);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    line-height: 1.4;
}
.yd-tab-btn.active .yd-tab-count {
    background: rgba(255,255,255,.25);
    color: #fff;
}

.yd-tab-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.yd-tab-panel.active { display: block; }

/* ── Nav item (Tab 1) ─────────────────────────────── */
.yd-nav-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 20px;
    color: var(--clr-text);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--clr-border);
    text-decoration: none;
    transition: background .15s, color .15s;
    position: relative;
}
.yd-nav-item:hover,
.yd-nav-item:focus-visible {
    background: var(--clr-primary-50);
    color: var(--clr-primary);
    outline: none;
}
.yd-nav-item.active-page {
    background: var(--clr-primary-50);
    color: var(--clr-primary);
}
.yd-nav-item .yd-nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--clr-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.yd-nav-item:hover .yd-nav-icon,
.yd-nav-item.active-page .yd-nav-icon {
    background: var(--clr-primary);
}
.yd-nav-item .yd-nav-icon i {
    font-size: 13px;
    color: var(--clr-text-3);
    transition: color .15s;
}
.yd-nav-item:hover .yd-nav-icon i,
.yd-nav-item.active-page .yd-nav-icon i {
    color: #fff;
}
.yd-nav-item .yd-nav-arrow {
    margin-inline-start: auto;
    opacity: .35;
    font-size: 10px;
    color: var(--clr-text-3);
    flex-shrink: 0;
}

/* ── Category tree (Tab 2) ────────────────────────── */
.yd-cat-item {
    border-bottom: 1px solid var(--clr-border);
}
.yd-cat-row {
    display: flex;
    align-items: center;
}
.yd-cat-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 11px 20px;
    flex: 1;
    min-width: 0;
    color: var(--clr-text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.yd-cat-link:hover { background: var(--clr-primary-50); color: var(--clr-primary); }
.yd-cat-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--cat-icon-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}
.yd-cat-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.yd-cat-badge {
    font-size: 9.5px;
    font-weight: 800;
    background: var(--clr-border);
    color: var(--clr-text-3);
    padding: 2px 7px;
    border-radius: 999px;
    flex-shrink: 0;
    margin-inline-start: 4px;
}
.yd-cat-toggle {
    width: 40px;
    height: 42px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-inline-start: 1px solid var(--clr-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-3);
    font-size: 11px;
    transition: background .15s, color .15s;
}
.yd-cat-toggle:hover { background: var(--clr-primary-50); color: var(--clr-primary); }
.yd-cat-toggle .yd-tog-ic { transition: transform .25s cubic-bezier(.4,0,.2,1); }
.yd-cat-toggle[aria-expanded="true"] .yd-tog-ic { transform: rotate(180deg); }

/* ════════════════════════════════════════════════════
   MULTI-LEVEL ACCORDION — Sub-panels L0→L4
   Each level has a distinct background tint so users
   can immediately identify depth at a glance.
   ════════════════════════════════════════════════════ */

/* ── Collapse/expand container ──────────────────── */
.yd-sub-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .32s cubic-bezier(.4,0,.2,1);
}

/* ── Level tints (light mode) ───────────────────── */
/* L1 = first subcategory group (direct children of root cat) */
.yd-sub-l1 {
    background: rgba(99,102,241,.035);
    border-inline-start: 2px solid rgba(99,102,241,.18);
    margin-inline-start: 0;
}
/* L2 = grandchildren */
.yd-sub-l2 {
    background: rgba(16,185,129,.04);
    border-inline-start: 2px solid rgba(16,185,129,.2);
}
/* L3 */
.yd-sub-l3 {
    background: rgba(245,158,11,.04);
    border-inline-start: 2px solid rgba(245,158,11,.2);
}
/* L4 */
.yd-sub-l4 {
    background: rgba(59,130,246,.04);
    border-inline-start: 2px solid rgba(59,130,246,.2);
}

/* ── Sub-item row wrapper ────────────────────────── */
.yd-sub-item {
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.yd-sub-item:last-child { border-bottom: none; }

/* ── Sub-item row (link + toggle) ───────────────── */
.yd-sub-row {
    display: flex;
    align-items: stretch;
}

/* ── Sub-item link ───────────────────────────────── */
.yd-sub-link {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    color: var(--clr-text-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .14s, color .14s;
}
.yd-sub-link:hover { background: var(--clr-primary-50); color: var(--clr-primary); }

/* Level-specific left padding (indent by depth) */
.yd-sub-l1 > .yd-sub-item > .yd-sub-row > .yd-sub-link { padding-inline-start: 36px; font-size: 13px; font-weight: 600; }
.yd-sub-l2 > .yd-sub-item > .yd-sub-row > .yd-sub-link { padding-inline-start: 48px; font-size: 12.5px; }
.yd-sub-l3 > .yd-sub-item > .yd-sub-row > .yd-sub-link { padding-inline-start: 60px; font-size: 12px; }
.yd-sub-l4 > .yd-sub-item > .yd-sub-row > .yd-sub-link { padding-inline-start: 72px; font-size: 11.5px; color: var(--clr-text-3); }

.yd-sub-link-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.yd-sub-link-badge {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--clr-border);
    color: var(--clr-text-3);
    margin-inline-start: 4px;
}

/* ── Sub-item toggle button ──────────────────────── */
.yd-sub-toggle {
    flex-shrink: 0;
    width: 36px;
    background: none;
    border: none;
    border-inline-start: 1px solid rgba(0,0,0,.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-3);
    font-size: 10px;
    transition: background .15s, color .15s;
    padding: 0;
}
.yd-sub-toggle:hover { background: var(--clr-primary-50); color: var(--clr-primary); }
.yd-sub-toggle .yd-tog-ic { transition: transform .24s cubic-bezier(.4,0,.2,1); }
.yd-sub-toggle[aria-expanded="true"] .yd-tog-ic { transform: rotate(180deg); }

/* ── "View all" chip inside sub-panel ───────────── */
.yd-sub-viewall {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--clr-primary);
    text-decoration: none;
    transition: background .14s;
    border-bottom: 1px solid rgba(0,0,0,.04);
    opacity: .85;
}
.yd-sub-viewall:hover { background: var(--clr-primary-50); opacity: 1; }
.yd-sub-l1 .yd-sub-viewall { padding-inline-start: 36px; }
.yd-sub-l2 .yd-sub-viewall { padding-inline-start: 48px; }
.yd-sub-l3 .yd-sub-viewall { padding-inline-start: 60px; }

/* ── Lazy-load spinner ───────────────────────────── */
.yd-sub-subs-wrap { /* JS-populated */ }
.yd-sub-spinner {
    padding: 10px 20px;
    color: var(--clr-text-3);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Dark-mode tints ─────────────────────────────── */
body.dark-mode .yd-sub-l1 {
    background: rgba(99,102,241,.07);
    border-inline-start-color: rgba(99,102,241,.25);
}
body.dark-mode .yd-sub-l2 {
    background: rgba(16,185,129,.07);
    border-inline-start-color: rgba(16,185,129,.25);
}
body.dark-mode .yd-sub-l3 {
    background: rgba(245,158,11,.07);
    border-inline-start-color: rgba(245,158,11,.25);
}
body.dark-mode .yd-sub-l4 {
    background: rgba(59,130,246,.07);
    border-inline-start-color: rgba(59,130,246,.25);
}
body.dark-mode .yd-sub-toggle { border-inline-start-color: rgba(255,255,255,.07); }
body.dark-mode .yd-sub-item   { border-bottom-color: rgba(255,255,255,.05); }

/* ── Language footer ──────────────────────────────── */
.yd-lang-footer {
    padding: 14px 16px 16px;
    border-top: 2px solid var(--clr-border);
    background: var(--clr-surface);
    flex-shrink: 0;
}
.yd-lang-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--clr-text-3);
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.yd-lang-btns {
    display: flex;
    gap: 7px;
}
.yd-lang-btn {
    flex: 1;
    text-align: center;
    padding: 9px 6px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--clr-border);
    background: transparent;
    color: var(--clr-text-2);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.yd-lang-btn.active {
    border-color: var(--clr-primary);
    background: var(--clr-primary-50);
    color: var(--clr-primary);
}

/* Dark mode — Tab buttons */
body.dark-mode .yd-tab-btn {
    color: var(--clr-text-2);
    background: var(--clr-surface-2);
    border-color: var(--clr-border);
}
body.dark-mode .yd-tab-btn:hover {
    color: var(--clr-primary);
    background: rgba(var(--clr-primary-rgb),.1);
    border-color: rgba(var(--clr-primary-rgb),.35);
}
body.dark-mode .yd-tab-btn.active {
    color: #fff;
    background: var(--clr-primary);
    border-color: var(--clr-primary);
}
body.dark-mode .yd-tab-btn.active:hover { color: #fff; }

/* Dark mode — Nav items (Tab 1) */
body.dark-mode .yd-nav-item {
    color: var(--clr-text);
    border-bottom-color: var(--clr-border);
}
body.dark-mode .yd-nav-item:hover,
body.dark-mode .yd-nav-item.active-page {
    color: var(--clr-primary);
    background: rgba(var(--clr-primary-rgb),.1);
}
body.dark-mode .yd-nav-item .yd-nav-icon {
    background: var(--clr-surface-2);
}
body.dark-mode .yd-nav-item:hover .yd-nav-icon,
body.dark-mode .yd-nav-item.active-page .yd-nav-icon {
    background: var(--clr-primary);
}
body.dark-mode .yd-nav-item .yd-nav-icon i { color: var(--clr-text-2); }
body.dark-mode .yd-nav-item:hover .yd-nav-icon i,
body.dark-mode .yd-nav-item.active-page .yd-nav-icon i { color: #fff; }
body.dark-mode .yd-nav-item .yd-nav-arrow { color: var(--clr-text-3); }

/* Dark mode — Category links (Tab 2) */
body.dark-mode .yd-cat-link {
    color: var(--clr-text);
}
body.dark-mode .yd-cat-link:hover {
    color: var(--clr-primary);
    background: rgba(var(--clr-primary-rgb),.1);
}
body.dark-mode .yd-cat-name { color: var(--clr-text); }
body.dark-mode .yd-cat-badge {
    background: var(--clr-surface-2);
    color: var(--clr-text-3);
}
body.dark-mode .yd-cat-toggle {
    color: var(--clr-text-3);
    border-inline-start-color: var(--clr-border);
}
body.dark-mode .yd-cat-toggle:hover {
    color: var(--clr-primary);
    background: rgba(var(--clr-primary-rgb),.1);
}

/* Dark mode — Sub-links */
body.dark-mode .yd-sub-link {
    color: var(--clr-text-2);
}
body.dark-mode .yd-sub-link:hover {
    color: var(--clr-primary);
    background: rgba(var(--clr-primary-rgb),.1);
}
body.dark-mode .yd-sub-viewall {
    color: var(--clr-primary);
}
body.dark-mode .yd-sub-viewall:hover {
    background: rgba(var(--clr-primary-rgb),.1);
}

/* Dark mode — Tab count badge */
body.dark-mode .yd-tab-count {
    background: rgba(var(--clr-primary-rgb),.2);
    color: var(--clr-primary);
}
body.dark-mode .yd-tab-btn.active .yd-tab-count {
    background: rgba(255,255,255,.2);
    color: #fff;
}

/* Dark mode — Lang buttons in drawer */
body.dark-mode .yd-lang-btn {
    color: var(--clr-text-2);
    border-color: var(--clr-border);
    background: var(--clr-surface-2);
}
body.dark-mode .yd-lang-btn.active {
    color: var(--clr-primary);
    border-color: var(--clr-primary);
    background: rgba(var(--clr-primary-rgb),.12);
}