/* ===== DASHBOARD LAYOUT OVERRIDES ===== */
/* These override the popup's style.css which forces body to 480x600 */

body {
    width: 100% !important;
    height: 100vh !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
}

/* Hide the popup background pattern — we'll add our own */
body > .maze-bg {
    display: none !important;
}

* {
    box-sizing: border-box;
    border-radius: 0 !important;
}

/* ===== SIDEBAR ===== */
.db-sidebar {
    width: 300px;
    flex-shrink: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-right: 4px solid var(--border-color);
    background: var(--bg-secondary);
    overflow: visible;
    z-index: 50;
}

.db-sidebar-header {
    padding: 20px 24px;
    border-bottom: 4px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.1s;
}

.db-sidebar-header:hover {
    background: var(--hover-bg);
}

.db-sidebar-header h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.db-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.db-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
    background: var(--bg-secondary);
    transition: background 0.1s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.db-nav-item:hover {
    background: var(--hover-bg);
}

.db-nav-item.active {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.db-nav-item.active svg {
    stroke: var(--bg-primary);
}

.db-nav-item--sub {
    padding-left: 48px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
}

.db-nav-section {
    padding: 12px 24px 6px;
    font-size: 11px;
    font-weight: 900;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 2px solid var(--border-color);
}

/* Collapsible folder children */
.db-nav-children.collapsed {
    display: none;
}

/* Chevron toggle */
.db-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
}

.db-nav-toggle.rotated .db-chevron {
    transform: rotate(-90deg);
}

.db-chevron {
    transition: transform 0.2s;
}

/* Deck count badge */
.db-nav-count {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    background: var(--hover-bg);
    padding: 2px 8px;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

.db-sidebar-footer {
    padding: 16px 24px;
    border-top: 4px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== MAIN AREA ===== */
.db-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-width: 0;
    background: var(--bg-primary);
    position: relative;
}

.db-toolbar {
    padding: 20px 32px;
    border-bottom: 4px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
    flex-shrink: 0;
    gap: 16px;
}

.db-toolbar h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-toolbar-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.db-body {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

/* ===== GRID VIEW ===== */
.db-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    width: 100%;
}

.db-card {
    border: 4px solid var(--border-color);
    background: var(--bg-secondary);
    padding: 24px;
    box-shadow: 6px 6px 0px var(--shadow-color);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.1s, box-shadow 0.1s;
}

.db-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px var(--shadow-color);
}

.db-card:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--shadow-color);
}

.db-card {
    min-width: 0;
}


.db-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    min-width: 0;
}

.db-card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.db-card h3 > svg {
    flex-shrink: 0;
    margin-top: 3px;
}

/* Long names wrap (preferring _ - . / boundaries) and clamp to two lines */
.db-card-title {
    min-width: 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.db-card-menu {
    flex-shrink: 0;
}

.db-card-meta {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.db-card-action {
    position: absolute; bottom: 24px; left: 0; right: 0;
    padding-top: 12px;
}

/* ===== STUDY VIEW ===== */
.db-study {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.db-study.active {
    display: flex;
}

.db-study-bar {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: 800;
    font-size: 16px;
}

/* Flashcard — completely standalone, not inheriting popup's .flashcard */
.db-flashcard {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 55vh;
    border: 4px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: 6px 6px 0px var(--shadow-color);
    position: relative;
    cursor: pointer;
    perspective: 1000px;
}

.db-flashcard-inner {
    position: absolute;
    inset: 0;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.db-flashcard.flipped .db-flashcard-inner {
    transform: rotateY(180deg);
}

.db-flashcard-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    overflow-y: auto;
    text-align: center;
    gap: 16px;
}

.db-flashcard-face--back {
    transform: rotateY(180deg);
}

.db-flashcard-face h2 {
    font-size: clamp(18px, 3vw, 32px);
    font-weight: 800;
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}

.db-flashcard-face h3 {
    font-size: clamp(16px, 2.5vw, 26px);
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}

.db-flashcard-face p {
    margin: 0;
}

.db-flashcard-face .example-text {
    font-size: clamp(13px, 1.5vw, 18px);
    font-style: italic;
    color: var(--text-secondary);
}

.db-flashcard-face .hint-text {
    font-size: 14px;
    color: var(--text-secondary);
    position: absolute; bottom: 24px; left: 0; right: 0;
    padding-top: 16px;
}

/* Cloze input inside flashcard */



/* Image in flashcard */
.db-flashcard-face p.img-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 0;
}

.db-flashcard-face img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    min-height: 0;
    flex: 1;
    border: 3px solid var(--border-color);
    box-shadow: 4px 4px 0px 0px var(--shadow-color);
    background: var(--bg-primary);
    margin: 8px 0;
    border-radius: 4px;
}

/* Study action buttons */
.db-study-actions {
    display: flex;
    gap: 16px;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.db-study-actions.visible {
    opacity: 1;
    pointer-events: all;
}

.db-study-actions button {
    flex: 1;
    font-size: 16px;
    padding: 16px;
    font-weight: 800;
}

/* ===== COMPLETE VIEW ===== */
.db-complete {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    gap: 16px;
}

.db-complete.active {
    display: flex;
}

.db-complete h1 {
    font-size: clamp(32px, 5vw, 56px);
    margin: 0;
}

.db-complete p {
    font-size: 20px;
    color: var(--text-secondary);
}

.db-complete-actions {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

.db-complete-actions button {
    font-size: 18px;
    padding: 16px 32px;
}

/* ===== MODAL ===== */
.db-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--bg-overlay);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.db-modal-overlay.active {
    display: flex;
}

.db-modal {
    border: 4px solid var(--border-color);
    background: var(--bg-secondary);
    padding: 32px;
    box-shadow: 8px 8px 0px var(--shadow-color);
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.db-modal h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
}

.db-modal-actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.db-modal-actions button {
    flex: 1;
    font-size: 14px;
    padding: 14px;
}

/* ===== EMPTY STATE ===== */
.db-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 32px;
    color: var(--text-secondary);
    gap: 16px;
}

.db-empty h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
}

.db-empty p {
    margin: 0;
    font-size: 14px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .db-sidebar {
        width: 240px;
    }
    .db-body {
        padding: 24px;
    }
}

@media (max-width: 700px) {
    body {
        flex-direction: column !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100dvh !important;
    }
    .db-sidebar {
        width: 100%;
        height: auto;
        max-height: none;
        border-right: none;
        border-bottom: none;
        border-top: 4px solid var(--border-color);
        order: 2; /* Push sidebar BELOW content on mobile */
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        overflow: visible;
        background: var(--bg-secondary);
        padding-bottom: env(safe-area-inset-bottom); /* iPhone home bar support */
    }
    .db-sidebar-header {
        display: none; /* Hide big logo on mobile */
    }
    .db-sidebar-nav {
        display: none; /* Hide full tree on mobile — use grid instead */
    }
    .db-sidebar-footer {
        padding: 12px 16px !important;
        border-top: none;
    }
    .db-sidebar-footer .dropdown-content {
        /* Dropdown opens UPWARD on mobile */
        bottom: 100% !important;
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        margin-bottom: 12px;
        min-width: 0 !important;
        width: auto !important;
    }
    .db-main {
        height: auto;
        flex: 1;
        order: 1;
        padding-bottom: calc(80px + env(safe-area-inset-bottom)); /* Space for fixed bottom nav */
        overflow: visible;
    }
    .db-body {
        padding: 16px;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }
    
    body.keyboard-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100dvh !important;
    }
    body.keyboard-open .db-sidebar,
    body.keyboard-open .db-study-actions {
        display: none !important;
    }
    body.keyboard-open .db-main {
        padding-bottom: 0 !important;
    }
    body.keyboard-open .db-flashcard {
        aspect-ratio: auto !important;
        flex: 1;
        min-height: 80px;
        max-height: none;
    }

    .db-study.active {
        flex: 1;
        justify-content: center;
        padding: 24px 0;
    }
    .db-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .db-toolbar {
        padding: 12px 16px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .db-toolbar h2 {
        font-size: 20px;
    }
    .db-toolbar-right .icon-btn {
        width: 36px;
        height: 36px;
    }
    /* Flashcard study view — perfectly centered on mobile */
    .db-flashcard {
        width: 100%;
        min-height: 250px;
        aspect-ratio: 1 / 1;
        max-height: 50vh;
        margin-bottom: 16px;
    }
    .db-study-actions {
        flex-direction: row;
        gap: 12px;
        width: 100%;
    }
    .db-study-actions button {
        font-size: 15px;
        padding: 18px 8px;
        font-weight: 900;
    }
    /* Stats bar — compact on mobile */
    .db-stats-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .db-stats-bar > div {
        font-size: 13px;
    }
    /* Modals — full-width on mobile */
    .db-modal-overlay .db-modal {
        max-width: 95vw !important;
        padding: 20px !important;
        max-height: 85vh;
        overflow-y: auto;
    }
    /* Settings modal — stack columns on mobile */
    .db-modal-overlay .db-modal > div[style*="display: flex"][style*="gap: 48px"] {
        flex-direction: column !important;
        gap: 24px !important;
    }
    /* Grid card touch-friendly sizing */
    .db-grid-card {
        min-height: 80px;
    }
    /* Add card form */
    .db-add-card {
        gap: 8px;
    }
    .db-add-card textarea {
        min-height: 60px;
    }
}

/* Ultra-small phones (SE, mini, etc.) */
@media (max-width: 380px) {
    .db-body {
        padding: 10px;
    }
    .db-toolbar h2 {
        font-size: 16px;
    }
    .db-flashcard {
        min-height: 220px;
    }
    .db-study-actions button {
        font-size: 12px;
        padding: 10px 6px;
    }
}

/* ===== DECK EDIT VIEW ===== */
.db-deck-edit {
    display: none;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    gap: 24px;
}
.db-deck-edit.active {
    display: flex;
}
.db-deck-stats {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 12px;
}
.db-deck-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 3px solid var(--border-color);
    background: var(--bg-secondary);
    gap: 16px;
}
.db-card-row-content {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.db-card-row-term {
    font-weight: 800;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.db-card-row-def {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-card-row-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.db-add-card {
    border: 4px dashed var(--border-color);
    padding: 24px;
    background: var(--bg-primary);
    margin-top: 16px;
}

/* ===== CONTEXT MENU ===== */
.db-context-menu {
    position: fixed;
    z-index: 9999;
    background: var(--bg-secondary);
    border: 3px solid var(--border-color);
    box-shadow: 6px 6px 0px var(--shadow-color);
    display: flex;
    flex-direction: column;
    min-width: 160px;
}
.db-context-menu button {
    border: none;
    border-bottom: 2px solid var(--border-color);
    background: none;
    text-align: left;
    padding: 12px 16px;
    font-weight: 800;
    box-shadow: none;
    font-size: 13px;
}
.db-context-menu button:last-child {
    border-bottom: none;
}
.db-context-menu button:hover {
    background: var(--hover-bg);
    transform: none;
}
.danger-text {
    color: #ff4444 !important;
}
.db-card-menu, .db-nav-menu {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.db-card-menu:hover, .db-nav-menu:hover {
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
    background: var(--hover-bg);
}

/* ===== TOAST ===== */
.db-toast {
    position: fixed;
    z-index: 99999;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 12px 24px;
    font-weight: 800;
    border-radius: 24px !important;
    font-size: 14px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    pointer-events: none;
}
.db-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.db-nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.db-nav-menu {
    flex-shrink: 0;
}
.db-nav-count { flex-shrink: 0; }

/* ===== STATS BAR ===== */
.db-stats-bar {
    display: flex;
    gap: 24px;
    padding: 0;
    width: 100%;
    margin-bottom: 32px;
}
.db-stat-card {
    flex: 1;
    background: var(--bg-secondary);
    border: 4px solid var(--border-color) !important;
    box-shadow: 4px 4px 0px var(--shadow-color);
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.db-stat-value {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 4px;
    color: var(--text-primary);
}
.db-stat-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}
@media (max-width: 900px) {
    .db-stats-bar {
        flex-direction: column;
        padding: 0;
        gap: 16px;
    }
}

/* Cloze styling */
.cloze-blank {
    display: inline-block;
    width: 100px;
    border-bottom: 3px dashed var(--text-primary);
    margin: 0 4px;
    vertical-align: baseline;
}

.cloze-highlight {
    background-color: var(--accent-primary, #ff4444);
    color: var(--bg-primary, #fff);
    border: 3px solid var(--text-primary, #000);
    box-shadow: 4px 4px 0px var(--shadow-color, rgba(0,0,0,0.15));
    padding: 2px 12px;
    margin: 0 4px;
    font-weight: 800;
    display: inline-block;
    border-radius: 8px;
}

.cloze-highlight-correct {
    background-color: #00cc00;
    color: #000;
}

.cloze-highlight-wrong {
    background-color: #ff4444;
    color: #fff;
}

.db-cloze-area {
    margin-top: 24px;
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.db-cloze-area input[type="text"] {
    flex: 1;
    font-size: 18px;
    padding: 14px 20px;
    border: 3px solid var(--text-primary, #000);
    box-shadow: 4px 4px 0px var(--shadow-color, rgba(0,0,0,0.15));
    outline: none;
    transition: transform 0.1s, box-shadow 0.1s;
}

.db-cloze-area input[type="text"]:focus {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--shadow-color, rgba(0,0,0,0.15));
}

.db-cloze-area button {
    padding: 0 32px;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
}

.db-cloze-result {
    font-weight: 900;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 24px;
}

/* Cloze Input Verification States */
.db-cloze-area input[type="text"].cloze-correct {
    border-color: #00cc00;
    background-color: #e6ffe6;
    color: #006600;
}

.db-cloze-area input[type="text"].cloze-wrong {
    border-color: #ff4444;
    background-color: #ffe6e6;
    color: #cc0000;
}

/* Quick Study Button */
.btn-quick-study {
    background-color: var(--hover-bg);
    border: 2px solid var(--text-primary);
    border-radius: 24px !important;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 2px 2px 0px var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
}

.btn-quick-study:hover {
    background-color: var(--text-primary);
    color: var(--bg-primary) !important;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px var(--text-primary);
}

.btn-quick-study:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px var(--text-primary);
}

.drag-over {
    background-color: var(--hover-bg) !important;
    border-style: dashed !important;
}


body.theme-autumn .db-main,
body.theme-vaporwave .db-main,
body.theme-blueprint .db-main,
body.theme-neopop .db-main,
body.theme-composition .db-main,
body.theme-earthy .db-main,
body.theme-space .db-main,
body.theme-moon .db-main,
body.theme-cabin .db-main,
body.theme-matcha .db-main,
body.theme-kylo .db-main,
body.theme-r2d2 .db-main,
body.theme-boba .db-main,
body.theme-fjord .db-main,
body.theme-library .db-main,
body.theme-campfire .db-main,
body.theme-storm .db-main,
body.theme-city .db-main,
body.theme-strawberry .db-main,
body.theme-tatooine .db-main {
    background: transparent !important;
}

/* ===== THEMES LIBRARY ===== */
.db-themes {
    display: none;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    max-width: 1240px;
}

.db-themes.active {
    display: flex;
}

.tl-shelf,
.tl-controls {
    background: var(--bg-secondary);
    border: 4px solid var(--border-color);
    box-shadow: 6px 6px 0 var(--shadow-color);
}

.tl-shelf {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
}

.tl-shelf-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.tl-shelf-text h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
}

.tl-shelf-hint {
    margin: 0;
    max-width: 600px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.tl-shelf-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tl-fav-count {
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.tl-toggle {
    min-height: 44px;
    padding: 0 16px;
    border: 3px solid var(--border-color);
    box-shadow: 3px 3px 0 var(--shadow-color);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.tl-toggle[aria-pressed="true"] {
    background: var(--text-primary);
    color: var(--bg-secondary);
}

.tl-toggle[hidden] {
    display: none;
}

.tl-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.tl-chip {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 3px solid var(--border-color);
    box-shadow: 3px 3px 0 var(--shadow-color);
    cursor: grab;
}

.tl-chip.is-active {
    background: var(--text-primary);
    color: var(--bg-secondary);
}

.tl-chip.is-dragging {
    opacity: 0.4;
}

.tl-chip.is-drop-target {
    outline: 3px dashed var(--text-primary);
    outline-offset: 4px;
}

.tl-grip {
    display: flex;
    align-items: center;
    padding: 0 2px 0 8px;
    opacity: 0.7;
}

.tl-chip-apply {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 14px 6px 8px;
    background: transparent;
    color: inherit;
    border: none;
    box-shadow: none;
    font-size: 13px;
    font-weight: 900;
}

.tl-chip-apply:hover,
.tl-chip-apply:active {
    background: transparent;
    transform: none;
    box-shadow: none;
}

.tl-chip-pos {
    font-size: 12px;
    opacity: 0.75;
}

.tl-chip-controls {
    display: flex;
    align-self: stretch;
    border-left: 2px solid var(--border-color);
}

.tl-chip-ctrl {
    width: 44px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: inherit;
    border: none;
    box-shadow: none;
}

.tl-chip-ctrl + .tl-chip-ctrl {
    border-left: 2px solid var(--border-color);
}

.tl-chip-ctrl:hover,
.tl-chip-ctrl:active {
    background: var(--hover-bg);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

.tl-chip-ctrl:disabled {
    opacity: 0.3;
    cursor: default;
}

.tl-shelf-empty {
    margin: 0;
    padding: 24px;
    border: 3px dashed var(--border-color);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.tl-shelf-empty[hidden] {
    display: none;
}

.tl-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
}

.tl-search {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 280px;
    max-width: 420px;
}

.tl-search label {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.tl-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 3px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.tl-search-box input {
    flex: 1;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
}

.tl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tl-results {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.tl-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Collection heading card: stays legible over any theme's background artwork */
.tl-group-head {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 18px;
    background: var(--bg-secondary);
    border: 3px solid var(--border-color);
    box-shadow: 3px 3px 0 var(--shadow-color);
}

.tl-group-head .tl-group-title {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}


.tl-group-title {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--bg-secondary);
    border: 3px solid var(--border-color);
    box-shadow: 3px 3px 0 var(--shadow-color);
}

.tl-group-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.tl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 36px;
}

.tl-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-secondary);
    border: 4px solid var(--border-color);
    box-shadow: 8px 8px 0 var(--shadow-color);
}

.tl-card.is-active {
    outline: 4px solid var(--text-primary);
    outline-offset: 6px;
}

.tl-preview {
    height: 236px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    box-sizing: border-box;
    border-bottom: 4px solid var(--border-color);
}

.tl-mini-card {
    width: 200px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    border: 3px solid;
}

.tl-mini-term {
    font-size: 16px;
    font-weight: 800;
}

.tl-mini-hint {
    font-size: 11px;
    font-weight: 700;
}

.tl-mini-buttons {
    display: flex;
    gap: 10px;
}

.tl-mini-btn {
    padding: 6px 12px;
    border: 2px solid;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.tl-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 18px 20px;
}

.tl-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.tl-card-name {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-card-meta {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.tl-star {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 3px solid var(--border-color);
}

.tl-apply,
.tl-active-badge {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    border: 3px solid var(--border-color);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.tl-active-badge {
    background: var(--text-primary);
    color: var(--bg-secondary);
}

.tl-no-results {
    margin: 0;
    padding: 32px;
    background: var(--bg-secondary);
    border: 3px dashed var(--border-color);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--text-secondary);
}

.db-sidebar-themes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    font-weight: 900;
    text-transform: uppercase;
}

.db-sidebar-themes.active {
    background: var(--text-primary);
    color: var(--bg-secondary);
}

@media (max-width: 700px) {
    .db-themes {
        gap: 28px;
    }
    .tl-shelf {
        padding: 18px;
    }
    .tl-controls {
        padding: 16px;
    }
    .tl-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .tl-preview {
        height: 190px;
    }
    /* Reorder mode stacks favorites into a list with up/down controls */
    .tl-shelf.is-reordering .tl-chips {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .tl-shelf.is-reordering .tl-chip {
        width: 100%;
    }
    .tl-shelf.is-reordering .tl-chip-apply {
        flex: 1;
        min-width: 0;
    }
    .tl-shelf.is-reordering .tl-move-icon {
        transform: rotate(90deg);
    }
    .tl-shelf:not(.is-reordering) .tl-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 6px 8px 2px;
    }
    .tl-shelf:not(.is-reordering) .tl-chip {
        flex-shrink: 0;
    }
    /* (Progress and Themes stay in the bottom bar, see the mobile block at the end) */
}

@media (hover: none) {
    .tl-grip {
        display: none;
    }
    .tl-chip {
        cursor: default;
    }
}

/* ===== PRACTICE TEST VIEW ===== */
.db-test {
    display: none;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.db-test.active {
    display: flex;
}

/* ===== QUIZ QUESTION EDITOR ===== */
.qe-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qe-editor[hidden] {
    display: none;
}

.qe-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.qe-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qe-field input,
.qe-field textarea {
    margin: 0;
}

.qe-label {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.qe-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.qe-choices {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qe-choices legend {
    padding: 0;
    margin-bottom: 8px;
}

.qe-choice {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qe-choice input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--text-primary);
}

.qe-letter {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    font-size: 12px;
    font-weight: 900;
}

.qe-choice .qe-choice-text {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.qe-remove {
    flex-shrink: 0;
}

.qe-add-choice {
    align-self: flex-start;
    margin-top: 4px;
}

.qe-error {
    margin: 0;
    padding: 10px 12px;
    border: 3px solid #ff4444;
    font-size: 13px;
    font-weight: 700;
}

.qe-error[hidden] {
    display: none;
}

.qe-actions {
    display: flex;
    gap: 12px;
}

.qe-actions button {
    flex: 1;
}

.qe-row--editing {
    outline: 3px dashed var(--text-primary);
    outline-offset: 3px;
}


/* Animated / premium theme badge on theme cards */
.tl-preview { position: relative; }
.tl-preview .scene { position: absolute; z-index: 0; --fire-w: 24cqmin; }
.tl-preview > :not(.scene) { position: relative; z-index: 1; }
.tl-preview > .tl-badge-animated { position: absolute; z-index: 2; }
.tl-badge-animated {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    background: #ffd25a;
    color: #2a1405;
    border: 3px solid #2a1405;
    box-shadow: 3px 3px 0 #2a1405;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tl-badge-animated svg { flex-shrink: 0; }

/* Folder color picker (new/edit folder modal) */
.fc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fc-preview {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--border-color);
    background: var(--bg-primary);
    box-shadow: 4px 4px 0 var(--shadow-color);
    flex-shrink: 0;
}
.fc-custom { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary); }
.fc-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fc-swatch {
    width: 28px; height: 28px; padding: 0;
    border: 3px solid var(--border-color);
    cursor: pointer;
}
.fc-swatch:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--shadow-color); }
.fc-swatch.is-selected { outline: 3px solid var(--text-primary); outline-offset: 2px; }


/* Scenery mode: hide the dashboard so the theme's artwork can be enjoyed */
.scenery-btn {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 3px solid var(--border-color);
    box-shadow: 3px 3px 0 var(--shadow-color);
    cursor: pointer;
    opacity: 0.85;
}
.scenery-btn:hover { opacity: 1; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-color); }
.scenery-btn .scenery-eye-off { display: none; }
body.scenery-mode .scenery-btn .scenery-eye { display: none; }
body.scenery-mode .scenery-btn .scenery-eye-off { display: block; }
.db-sidebar, .db-main { transition: opacity 0.3s ease, visibility 0.3s; }
body.scenery-mode .db-sidebar,
body.scenery-mode .db-main {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ===== PROGRESS ===== */
.db-progress { display: none; width: 100%; }
.db-progress.active { display: block; }
.db-stats-bar { flex-wrap: wrap; }
.db-stat-card { min-width: 190px; }
.db-stat-card--link { cursor: pointer; }
.db-stat-card--link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-color); }
.db-stat-ring { display: flex; justify-content: center; margin-bottom: 6px; }
.db-stat-sub { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-align: center; min-height: 1em; }
.db-card-bar { margin-top: 2px; }
.pg-ring { color: var(--text-primary); }

.pg { display: flex; flex-direction: column; gap: 24px; max-width: 1180px; margin: 0 auto; }
.pg-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pg-title { margin: 0; font-size: 30px; font-weight: 900; text-transform: uppercase; }
.pg-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); max-width: 560px; }
.pg-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pg-goal { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.pg-goal input {
    width: 78px; margin: 0; padding: 8px 10px; font-weight: 800; text-align: center;
    background: var(--input-bg); color: var(--text-primary);
    border: 3px solid var(--border-color); border-radius: 0; appearance: textfield; -moz-appearance: textfield;
}
.pg-goal input:focus { outline: none; box-shadow: 4px 4px 0 var(--text-primary); }
.pg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(166px, 1fr)); gap: 16px; }
.pg-tiles--small { margin-bottom: 14px; }
.pg-tile { background: var(--bg-secondary); border: 4px solid var(--border-color); box-shadow: 5px 5px 0 var(--shadow-color); padding: 18px; text-align: center; }
.pg-tile-value { font-size: 40px; font-weight: 900; line-height: 1.05; }
.pg-tile-label { margin-top: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.pg-tile-sub { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pg-tile-ring { display: flex; justify-content: center; }
.pg-card { background: var(--bg-secondary); border: 4px solid var(--border-color); box-shadow: 5px 5px 0 var(--shadow-color); padding: 22px; min-width: 0; }
.pg-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.pg-h { margin: 0; font-size: 18px; font-weight: 900; text-transform: uppercase; }
.pg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; }
.pg-chips { display: flex; gap: 6px; }
.pg-chip { padding: 5px 10px; font-size: 12px; font-weight: 900; border: 3px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; box-shadow: none; }
.pg-chip.is-active { background: var(--text-primary); color: var(--bg-secondary); }
.pg-empty { margin: 0; font-size: 14px; color: var(--text-secondary); }
.pg-wide { width: 100%; margin-top: 14px; }

.pg-axis { font-size: 9px; font-weight: 700; fill: var(--text-secondary); }
.pg-heatmap { display: block; overflow: visible; max-width: 100%; height: auto; }
.pg-hm { fill: var(--text-primary); }
.pg-hm.l0 { fill-opacity: .08; } .pg-hm.l1 { fill-opacity: .28; } .pg-hm.l2 { fill-opacity: .5; } .pg-hm.l3 { fill-opacity: .75; } .pg-hm.l4 { fill-opacity: 1; }
.pg-hm-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.pg-hm-legend .pg-hm { width: 13px; height: 13px; border-radius: 2px; background: var(--text-primary); display: inline-block; }
.pg-hm-legend .l0 { opacity: .08; } .pg-hm-legend .l1 { opacity: .28; } .pg-hm-legend .l2 { opacity: .5; } .pg-hm-legend .l3 { opacity: .75; } .pg-hm-legend .l4 { opacity: 1; }
.pg-bar { fill: var(--text-primary); fill-opacity: .8; }
.pg-line { stroke: #e0a458; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.pg-grid { stroke: var(--text-primary); stroke-opacity: .12; stroke-width: 1; }
.pg-trend { display: block; }

.pg-mastery { display: flex; width: 100%; height: 22px; border: 3px solid var(--border-color); background: var(--pg-inset); overflow: hidden; }
.pg-mastery--thin { height: 10px; border-width: 2px; }
.pg-seg { display: block; height: 100%; }
.pg-seg.is-mastered, .pg-dot.is-mastered { background: #2fa563; }
.pg-seg.is-learning, .pg-dot.is-learning { background: #e0a458; }
.pg-seg.is-new, .pg-dot.is-new { background: var(--text-secondary); opacity: .45; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.pg-legend--top { margin: 0 0 6px; }
.pg-legend b { color: var(--text-primary); }
.pg-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--border-color); vertical-align: -1px; }
.pg-dot.is-bar { background: var(--text-primary); opacity: .8; } .pg-dot.is-line { background: #e0a458; }

.pg-table { display: flex; flex-direction: column; }
.pg-row { display: grid; grid-template-columns: minmax(140px, 1.6fr) minmax(90px, 1fr) repeat(3, 74px) auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 2px solid var(--border-color); }
.pg-row:first-child { border-top: 0; }
.pg-row--quiz { grid-template-columns: minmax(140px, 1.6fr) minmax(90px, 1fr) repeat(4, 66px); }
.pg-row-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-row-sub { font-size: 12px; color: var(--text-secondary); }
.pg-row-num { text-align: center; display: flex; flex-direction: column; }
.pg-row-num b { font-size: 16px; font-weight: 900; } .pg-row-num span { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary); }
.pg-row-btn { padding: 6px 14px; font-size: 12px; }
.is-up { color: #2fa563; } .is-down { color: #d9534f; }
.pg-spark { color: var(--text-primary); }

.pg-hard { margin: 0; padding: 0; list-style: none; counter-reset: h; display: flex; flex-direction: column; gap: 8px; }
.pg-hard li { counter-increment: h; display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 2px solid var(--border-color); }
.pg-hard li:first-child { border-top: 0; }
.pg-hard-term { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-hard-term::before { content: counter(h) '. '; color: var(--text-secondary); }
.pg-hard-meta { font-size: 12px; font-weight: 800; color: var(--text-secondary); white-space: nowrap; }

.pg-bars { display: flex; align-items: flex-end; gap: 3px; height: 74px; margin-bottom: 14px; }
.pg-bars-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.pg-bars-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.pg-bars-bar span { display: block; width: 100%; background: var(--text-primary); opacity: .75; min-height: 2px; }
.pg-bars-label { font-size: 9px; font-weight: 800; color: var(--text-secondary); height: 12px; white-space: nowrap; }
.pg-insight { margin: 0; font-size: 13px; color: var(--text-secondary); }

.pg-types { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pg-type { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.pg-meter { height: 12px; border: 2px solid var(--border-color); background: var(--pg-inset); } .pg-meter span { display: block; height: 100%; background: var(--text-primary); }

.pg-achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pg-ach { border: 3px solid var(--border-color); padding: 12px; opacity: .5; text-align: center; background: var(--pg-inset); }
.pg-ach.is-unlocked { opacity: 1; background: var(--bg-secondary); box-shadow: 3px 3px 0 var(--shadow-color); }
.pg-ach-icon { display: flex; justify-content: center; margin-bottom: 6px; }
.pg-ach.is-unlocked .pg-ach-icon { color: #2fa563; }
.pg-ach-name { font-weight: 900; font-size: 14px; } .pg-ach-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.pg-records { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.pg-records b { color: var(--text-primary); margin-left: 6px; }

.pg-deckpanel { border: 3px solid var(--border-color); background: var(--bg-secondary); padding: 16px; margin: 0 0 18px; }
.pg-deckpanel-tiles { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-bottom: 14px; }
.pg-deckpanel-tiles div { display: flex; flex-direction: column; }
.pg-deckpanel-tiles b { font-size: 20px; font-weight: 900; } .pg-deckpanel-tiles span { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary); }
.pg-deckpanel-hard { margin-top: 12px; font-size: 12px; color: var(--text-secondary); } .pg-deckpanel-hard em { font-style: normal; font-weight: 800; color: var(--text-primary); margin-left: 6px; }

@media (max-width: 760px) {
    .pg-cols { grid-template-columns: 1fr; }
    .pg-row { grid-template-columns: 1fr 1fr 1fr; }
    .pg-row-main { grid-column: 1 / -1; } .pg-row-bar { grid-column: 1 / -1; }
    .pg-row--quiz { grid-template-columns: repeat(3, 1fr); }
    .pg-type { grid-template-columns: 100px 1fr 40px; }
}


/* ===== PROGRESS v2 ===== */
/* Tiles: content centred both ways even when neighbours are taller */
.pg-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 168px; }
.pg-tile .pg-tile-sub { margin-top: 2px; line-height: 1.35; }
.pg-tile-label { margin-top: 6px; }
.db-stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Insights */
.pg-insights { display: flex; flex-direction: column; gap: 8px; }
.pg-insight { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-secondary); border: 3px solid var(--border-color); font-size: 14px; font-weight: 600; }
.pg-insight > span:nth-child(2) { flex: 1; min-width: 0; }
.pg-insight-dot { width: 12px; height: 12px; flex-shrink: 0; border: 2px solid var(--border-color); background: var(--text-secondary); }
.pg-insight--good .pg-insight-dot { background: #2fa563; } .pg-insight--warn .pg-insight-dot { background: #e0a458; } .pg-insight--info .pg-insight-dot { background: #5aa0e0; }
.pg-insight-btn { padding: 4px 12px; font-size: 12px; }

/* Activity + day panel */
.pg-activity { display: grid; grid-template-columns: auto minmax(260px, 1fr); gap: 28px; align-items: start; }
.pg-heat-wrap { min-width: 0; overflow-x: auto; }
.pg-hm { cursor: pointer; }
.pg-hm.is-selected { stroke: var(--text-primary); stroke-width: 2; }
.pg-daypanel { border: 3px solid var(--border-color); background: var(--pg-inset); padding: 16px 18px; min-height: 228px; min-width: 0; }
.pg-day-date { font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; margin-bottom: 8px; }
.pg-day-date em { font-style: normal; font-size: 10px; padding: 2px 6px; background: var(--text-primary); color: var(--bg-primary); margin-left: 6px; vertical-align: 1px; }
.pg-day-big { font-size: 38px; font-weight: 900; line-height: 1; margin-bottom: 10px; }
.pg-day-big span { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.pg-day-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 4px; }
.pg-day-facts div { display: flex; flex-direction: column; } .pg-day-facts b { font-size: 18px; font-weight: 900; } .pg-day-facts span { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary); }
.pg-day-decks { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pg-day-sub { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.pg-day-decks div { display: flex; justify-content: space-between; gap: 10px; } .pg-day-decks div span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-day-more, .pg-day-note { color: var(--text-secondary); font-size: 12px; margin: 6px 0 0; }
.pg-seg.is-forgot, .pg-dot.is-forgot { background: #d9534f; }

/* Hardest cards */
.pg-hard li { align-items: flex-start; }
.pg-hard-main { min-width: 0; flex: 1; }
.pg-hard-deck { font-size: 11px; font-weight: 700; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-hard-meta { text-align: right; line-height: 1.35; } .pg-hard-meta b { color: #d9534f; }
.pg-sub--tight { margin: 0 0 10px; max-width: none; }
.pg-note { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }

/* Quizzes */
.pg-types-title { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 4px 0 8px; }
.pg-type { grid-template-columns: 130px 1fr 44px 54px; } .pg-type em { font-style: normal; font-size: 11px; color: var(--text-secondary); }
.pg-quizzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; margin-top: 18px; }
.pg-quiz { border: 3px solid var(--border-color); background: var(--pg-inset); padding: 16px; min-width: 0; }
.pg-quiz-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pg-quiz-stats { display: flex; gap: 16px; } .pg-quiz-stats div { display: flex; flex-direction: column; text-align: center; }
.pg-quiz-stats b { font-size: 18px; font-weight: 900; } .pg-quiz-stats span { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary); }
.pg-attempts { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 4px; overflow-x: auto; }
.pg-attempts-goal { position: absolute; left: 0; right: 0; bottom: calc(18px + (100% - 40px) * .8); border-top: 2px dashed var(--text-secondary); opacity: .5; pointer-events: none; }
.pg-attempt { flex: 1 0 34px; max-width: 64px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.pg-attempt-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; border-bottom: 2px solid var(--border-color); }
.pg-attempt-bar i { display: block; width: 100%; }
.pg-attempt-bar i.is-ok { background: #2fa563; } .pg-attempt-bar i.is-mid { background: #e0a458; } .pg-attempt-bar i.is-low { background: #d9534f; }
.pg-attempt-pct { font-size: 11px; font-weight: 900; height: 16px; } .pg-attempt-n { font-size: 10px; font-weight: 800; color: var(--text-secondary); height: 16px; }
.pg-attempts-cap { margin-top: 8px; font-size: 11px; color: var(--text-secondary); }

/* Mastery focus list */
.pg-focus { margin-top: 18px; }
.pg-focus-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 2px solid var(--border-color); }
.pg-focus-main { min-width: 0; } .pg-focus-main .pg-row-name { overflow: hidden; text-overflow: ellipsis; }
.pg-axis--acc { fill: #e0a458; }

/* Deck mastery explorer */
.pg-dk-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.pg-dk-search { flex: 1 1 220px; max-width: 340px; margin: 0 !important; width: auto !important; padding: 8px 12px !important; }
.pg-dk-select { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.pg-dk-select select { padding: 7px 10px; border: 3px solid var(--border-color); background: var(--input-bg); color: var(--text-primary); font-weight: 700; max-width: 240px; }
.pg-chips--wrap { flex-wrap: wrap; margin-bottom: 12px; }
.pg-chip b { margin-left: 4px; opacity: .7; }
.pg-dk-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; color: var(--text-secondary); }
.pg-dk-summary .pg-mastery { flex: 1 1 200px; max-width: 360px; } .pg-dk-summary b { color: var(--text-primary); }
.pg-dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.pg-dk { border: 3px solid var(--border-color); background: var(--pg-inset); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; }
.pg-dk-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.pg-dk-name { font-weight: 800; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pg-dk-badge { flex-shrink: 0; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border: 2px solid var(--border-color); }
.pg-dk-badge.is-mastered { background: #2fa563; color: #fff; border-color: #2fa563; } .pg-dk-badge.is-review { background: #d9534f; color: #fff; border-color: #d9534f; }
.pg-dk-badge.is-stale { background: #e0a458; color: #1a1020; border-color: #e0a458; } .pg-dk-badge.is-progress { background: transparent; } .pg-dk-badge.is-new { opacity: .7; }
.pg-dk-path { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-dk-pct { font-size: 13px; } .pg-dk-pct b { font-size: 20px; font-weight: 900; } .pg-dk-pct span { color: var(--text-secondary); font-size: 12px; margin-left: 4px; }
.pg-dk-meta { font-size: 12px; color: var(--text-secondary); }
.pg-dk-btn { align-self: flex-start; padding: 5px 14px; font-size: 12px; margin-top: 2px; }
.pg-dk-more { margin-top: 14px; display: flex; justify-content: center; }

@media (max-width: 900px) {
    .pg-activity { grid-template-columns: 1fr; }
    .pg-quizzes { grid-template-columns: 1fr; }
}

.pg-dk-name { min-height: 2.5em; }
.pg-dk-btn { margin-top: auto; }
.pg-attempt { max-width: 84px; }
.pg-tile-sub { overflow-wrap: anywhere; }


/* ===== LAYOUT CONSISTENCY ===== */
:root { --db-header-h: 78px; }

/* Logo header and page toolbar share one height, so their bottom borders form a single straight line */
@media (min-width: 701px) {
    .db-sidebar-header, .db-toolbar { height: var(--db-header-h); min-height: var(--db-header-h); padding-top: 0; padding-bottom: 0; }
    .db-sidebar-header { padding-left: 24px; padding-right: 24px; }
}
.db-sidebar-header img { display: block; flex-shrink: 0; }
.db-sidebar-header h1 { line-height: 1; }
.db-toolbar h2 { line-height: 1.1; }

/* One fixed card size for folders, decks and quizzes, whatever the name length */
.db-grid { align-items: start; }
.db-grid-heading { grid-column: 1 / -1; grid-row: auto; height: auto !important; display: flex; align-items: center; gap: 10px; margin: 8px 0 -8px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); }
.db-grid-heading:first-child { margin-top: 0; }
.db-grid-heading::after { content: ""; flex: 1; height: 3px; background: var(--border-color); opacity: .5; }
.db-grid-heading b { order: 1; font-size: 11px; padding: 1px 7px; border: 2px solid var(--border-color); color: var(--text-primary); }
.db-grid-heading span { order: 0; }
.db-grid-heading::after { order: 2; }
.db-card { height: 176px; overflow: hidden; }
.db-card-header { min-height: 48px; }
.db-card-meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }

/* Deck icon: solid card, inverts on the selected sidebar row */
.db-nav-item--sub { padding-left: 44px; }

/* Collapsible sidebar (desktop and tablet) */
.db-sidebar { transition: width 0.2s ease; }
@media (min-width: 701px) {
    body.sidebar-collapsed .db-sidebar { width: 76px; }
    body.sidebar-collapsed .db-sidebar-header { justify-content: center; padding-left: 0; padding-right: 0; }
    body.sidebar-collapsed .db-sidebar-header h1,
    body.sidebar-collapsed .db-nav-section,
    body.sidebar-collapsed .db-nav-label,
    body.sidebar-collapsed .db-nav-count,
    body.sidebar-collapsed .db-nav-menu,
    body.sidebar-collapsed .db-nav-toggle,
    body.sidebar-collapsed .db-nav-children,
    body.sidebar-collapsed .db-btn-label { display: none !important; }
    body.sidebar-collapsed .db-nav-item { justify-content: center; padding: 14px 0; }
    body.sidebar-collapsed .db-sidebar-footer { padding: 12px 10px !important; }
    body.sidebar-collapsed .db-sidebar-footer button { padding-left: 0; padding-right: 0; }
    body.sidebar-collapsed .db-sidebar-nav { overflow-x: hidden; }
}
@media (max-width: 700px) {
    #btn-sidebar-toggle { display: none; }
    /* bottom bar: Progress | Themes | Add New in one row */
    .db-sidebar-footer { flex-direction: row !important; align-items: stretch; gap: 8px !important; }
    .db-sidebar-themes { display: flex !important; width: auto; flex: 1; min-height: 46px; padding: 0 8px; }
    .db-sidebar-footer .dropdown { flex: 1.6; }
    .db-sidebar-footer .dropdown > button { min-height: 46px; }
    .db-sidebar-footer .db-sidebar-themes .db-btn-label { font-size: 12px; }
    .scenery-btn { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
    .db-card { height: 168px; }
}
@media (max-width: 380px) {
    .db-sidebar-footer .db-sidebar-themes .db-btn-label { display: none; }
}

@media (max-width: 700px) {
    /* compact 2x2 stats on phones instead of four full-height cards */
    .db-stats-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; margin-bottom: 20px; }
    .db-stat-card { min-width: 0; padding: 12px 8px; }
    .db-stat-value { font-size: 30px; }
    .db-stat-label { font-size: 11px; }
    .db-stat-ring .pg-ring { width: 56px; height: 56px; }
    .db-sidebar-footer .dropdown > button { white-space: nowrap; font-size: 12px; padding-left: 6px; padding-right: 6px; }
    .db-grid-heading { margin-top: 4px; }
}

/* Collapse toggle lives inside the Retention header box */
.db-sidebar-toggle { margin-left: auto; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (min-width: 701px) {
    body.sidebar-collapsed .db-sidebar-header img,
    body.sidebar-collapsed .db-sidebar-header h1 { display: none !important; }
    body.sidebar-collapsed .db-sidebar-toggle { margin-left: 0; }
}


/* ===== PROGRESS polish (round 2) ===== */
/* Insights as one whiteboard */
.pg-insights { display: none; }
.pg-board { background: var(--bg-secondary); border: 4px solid var(--border-color); box-shadow: 5px 5px 0 var(--shadow-color); padding: 16px 22px 8px; }
.pg-board-title { margin: 0 0 4px; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--text-secondary); }
.pg-board-list { list-style: none; margin: 0; padding: 0; }
.pg-board-item { display: flex; align-items: center; gap: 14px; padding: 11px 0; font-size: 15px; font-weight: 600; border-top: 2px dashed rgba(127, 127, 127, .35); }
.pg-board-item:first-child { border-top: 0; }
.pg-board-text { flex: 1; min-width: 0; }
.pg-board-item--good .pg-insight-dot { background: #2fa563; } .pg-board-item--warn .pg-insight-dot { background: #e0a458; } .pg-board-item--info .pg-insight-dot { background: #5aa0e0; }

/* Stat tiles: fixed-size, wrap, and stay centred when a row is short */
.pg-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.pg-tiles > .pg-tile { flex: 1 1 160px; min-width: 150px; max-width: 220px; }

/* Heatmap: bigger cells (easier to hover) next to a compact day panel */
.pg-activity { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: center; }
.pg-heat-wrap { overflow: visible; }
.pg-heatmap { width: 100%; height: auto; max-width: none; }
.pg-daypanel { min-height: 0; padding: 14px 16px; }
.pg-day-big { font-size: 34px; margin-bottom: 8px; }
.pg-day-facts { margin: 10px 0 2px; }
@media (max-width: 900px) { .pg-activity { grid-template-columns: 1fr; } }

/* No stretched, half-empty cards: columns size to their own content */
.pg-cols { align-items: start; }
.pg-bars { height: 92px; }

/* Weekly comparison under the trend chart */
.pg-week { margin-top: 16px; padding-top: 12px; border-top: 2px dashed rgba(127, 127, 127, .35); }
.pg-week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.pg-week-cell { display: flex; flex-direction: column; gap: 1px; }
.pg-week-cell span { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-secondary); }
.pg-week-cell b { font-size: 20px; font-weight: 900; }
.pg-delta { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.pg-delta.is-up { color: #2fa563; } .pg-delta.is-down { color: #d9534f; }

/* Sidebar toggle: just the icon, no box */
button.db-sidebar-toggle, .db-sidebar-toggle:hover, .db-sidebar-toggle:active { background: transparent !important; border: none !important; box-shadow: none !important; padding: 4px; width: 36px; height: 36px; color: var(--text-primary); }
.db-sidebar-toggle:hover { opacity: .65; transform: none; }

/* ===== Modals share the Progress page's look ===== */
.db-modal h2 { font-size: 24px; letter-spacing: .02em; }
.db-modal h3 { text-transform: uppercase; font-size: 16px !important; font-weight: 900; letter-spacing: .06em; }
.db-modal select, .db-modal input[type="text"], .db-modal input[type="password"], .db-modal input[type="search"], .db-modal input[type="number"], .db-modal textarea {
    background: var(--input-bg) !important; color: var(--text-primary) !important;
    border: 3px solid var(--border-color) !important; border-radius: 0; font-weight: 600;
}
.db-modal select { appearance: none; -webkit-appearance: none; padding-right: 32px !important; cursor: pointer; font-weight: 800;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55% !important; background-size: 6px 6px !important; background-repeat: no-repeat !important; }
.db-modal ::placeholder { color: var(--text-secondary); opacity: .8; }
.db-modal .location-hint, .db-modal p { color: var(--text-secondary); }

.pg, .db-modal { --pg-inset: color-mix(in srgb, var(--text-primary) 6%, var(--bg-secondary)); }
.pg-top .pg-sub { color: var(--text-primary); opacity: .85; }
.pg-daypanel { box-shadow: 4px 4px 0 var(--shadow-color); }
.pg-mastery, .pg-meter { background: var(--pg-inset); }

/* Stable geometry: the day panel has a fixed height so the heatmap never shifts under the cursor */
.pg-activity { align-items: stretch; }
.pg-heat-wrap { display: flex; flex-direction: column; justify-content: center; }
.pg-daypanel { height: 340px; overflow: hidden; }
@media (max-width: 900px) { .pg-daypanel { height: auto; min-height: 260px; } }