/* =====================================================
   SMART WORDBOOK — COMPLETE STYLESHEET (theme-aware)
   Theme tokens (Astra / WP presets) → plugin fallbacks.
   Full-bleed layout is SCOPED to pages that contain the shortcode.
   ===================================================== */

/* Theme-aware design tokens (priority: Astra → WP preset → plugin default) */
#smart-wordbook-scope {
    --djv-primary:       var(--ast-global-color-0, var(--wp--preset--color--vivid-cyan-blue, var(--wp--preset--color--primary, #0F4CFF)));
    --djv-primary-dark:  var(--ast-global-color-1, var(--wp--preset--color--vivid-cyan-blue, #2159E5));
    --djv-primary-mid:   var(--ast-global-color-2, #4277E0);
    --djv-primary-light: var(--ast-global-color-3, #7CA2FF);
    --djv-primary-pale:  var(--ast-global-color-4, #BCCFFF);
    --djv-primary-soft:  var(--ast-global-color-5, #F0F4FF);
    --djv-text:          var(--ast-global-color-8, var(--wp--preset--color--foreground, #1f2937));
    --djv-text-muted:    var(--wp--preset--color--cyan-bluish-gray, #64748b);
    --djv-bg:            var(--wp--preset--color--base, #ffffff);
    --djv-bg-soft:       #F6F8F5;
    --djv-font:          var(--wp--preset--font-family--body, 'Inter', 'Hind Siliguri', -apple-system, BlinkMacSystemFont, sans-serif);
    --djv-font-heading:  var(--wp--preset--font-family--heading, var(--djv-font));
    --djv-radius:        var(--wp--custom--border-radius, 12px);
    --djv-space:         var(--wp--preset--spacing--20, 1rem);
}

/* Layout adjustments ONLY when Smart Wordbook shortcode is present (no global theme breakage) */
/* Full-page Smart Wordbook only — never when only [smart_mnemonic] embedded widget is present */
body:has(#smart-wordbook-scope:not(.sw-is-embedded)) #content.site-content,
body:has(#smart-wordbook-scope:not(.sw-is-embedded)) #content.site-content > .container,
body:has(#smart-wordbook-scope:not(.sw-is-embedded)) #primary.content-area,
body:has(#smart-wordbook-scope:not(.sw-is-embedded)) #main.site-main,
body:has(#smart-wordbook-scope:not(.sw-is-embedded)) article.page,
body:has(#smart-wordbook-scope:not(.sw-is-embedded)) .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body:has(#smart-wordbook-scope:not(.sw-is-embedded)) figure.post-thumbnail:empty {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
}

/* Full-bleed header: remove side gutters only on full Smart Wordbook pages */
body:has(#smart-wordbook-scope:not(.sw-is-embedded)) #content.site-content > .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* Header flush to top inside scope */
#smart-wordbook-scope { padding-top: 0 !important; margin-top: 0 !important; }
#smart-wordbook-scope .sw-header {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

@media (max-width: 768px) {
    #smart-wordbook-scope .sw-topbanner img { max-height: 120px !important; }
}

#smart-wordbook-scope {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 0 32px 0 !important;
    background-color: var(--djv-bg-soft, #F6F8F5) !important;
    font-family: var(--djv-font) !important;
    color: var(--djv-text, #1f2937) !important;
    line-height: 1.5 !important;
}

#smart-wordbook-scope * {
    box-sizing: border-box !important;
}


    #smart-wordbook-scope .sw-btn-file-import {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        color: white !important;
        padding: 10px 20px !important;
        border-radius: 12px !important;
        cursor: pointer !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    #smart-wordbook-scope .sw-btn-file-import:hover { 
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3) !important;
    }
    #smart-wordbook-scope .sw-admin-top-actions { display: flex !important; gap: 12px !important; align-items: center !important; }
    
    /* Advanced Batch Grouping UI */
#smart-wordbook-scope .sw-batch-group {
    position: relative !important;   /* ADD THIS LINE */
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(229, 231, 235, 0.5) !important;
    transition: all 0.3s ease !important;
}
    #smart-wordbook-scope .sw-batch-group:hover {
        box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
    }
    #smart-wordbook-scope .sw-batch-group-header {
        background: linear-gradient(to right, #f8fafc, #ffffff) !important;
        padding: 14px 7px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer !important;
        border-radius:10px;
    }
    #smart-wordbook-scope .sw-batch-words-wrapper {
        display: grid !important;
        grid-template-rows: 0fr !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: grid-template-rows 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                    opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                    visibility 0s linear 0.6s !important;
    }
    #smart-wordbook-scope .sw-batch-words-wrapper.open {
        grid-template-rows: 1fr !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: grid-template-rows 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                    opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                    visibility 0s linear 0s !important;
    }
    #smart-wordbook-scope .sw-batch-words-inner {
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 10px !important;
        transition: padding 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }
    #smart-wordbook-scope .sw-batch-words-wrapper.open .sw-batch-words-inner {
        padding: 10px !important;
    }
    #smart-wordbook-scope .sw-batch-label {
        font-weight: 800 !important;
        color: #1e293b !important;
        font-size: 16px !important;
        background: #e2e8f0 !important;
        padding: 4px 12px !important;
        border-radius: 8px !important;
    }
    #smart-wordbook-scope .sw-batch-action-btn {
        padding: 8px 16px !important;
        border-radius: 10px !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        transition: all 0.2s !important;
    }
    #smart-wordbook-scope .sw-batch-exam-btn {
        background: #f43f5e !important;
        color: white !important;
    }
    
    /* 10x UI: Word Cards */
    #smart-wordbook-scope .sw-word-card {
        border-radius: 16px !important;
        border: 1px solid #f1f5f9 !important;
        background: #ffffff !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        margin-bottom:10px;
    }
    #smart-wordbook-scope .sw-word-card:hover {
        transform: scale(1.01) !important;
        box-shadow: 0 12px 25px rgba(0,0,0,0.05) !important;
    }
    
    
    /* Progress Bar */
    .sw-modal-progress-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 4px !important;
        background: #e2e8f0 !important;
        border-radius: 4px 4px 0 0 !important;
        overflow: hidden !important;
    }
    .sw-modal-progress-bar {
        height: 100% !important;
        background: #3b82f6 !important;
        width: 0% !important;
        transition: width 0.3s ease !important;
    }
    .sw-breakdown-row {
        display: flex !important;
        justify-content: space-between !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 14px !important;
    }
    .sw-batch-breakdown {
        margin-top: 20px !important;
        width: 100% !important;
        background: #f8fafc !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }
/* Modes Divider */
    #smart-wordbook-scope .sw-modes-divider {
        display: flex !important;
        align-items: center !important;
        margin: 24px 0 16px 0 !important;
        color: #94a3b8 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }
    #smart-wordbook-scope .sw-modes-divider::before,
    #smart-wordbook-scope .sw-modes-divider::after {
        content: "" !important;
        flex: 1 !important;
        height: 1px !important;
        background: #e2e8f0 !important;
    }
    #smart-wordbook-scope .sw-modes-divider span { padding: 0 12px !important; }

    /* Glassmorphism Effects */
    #smart-wordbook-scope .sw-modal-content {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    /* Animations */
    @keyframes swFadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    /* Word cards render without entry animation to avoid distracting motion when toggling favorites. */
    #smart-wordbook-scope .sw-word-card { animation: none !important; }
    
    /* (legacy hero-search override removed — it fought the real hero styles
       below and made the placeholder/text unreadable while typing) */
    
    
/* =====================================================
   HEADER / HERO — "liquid glass" card design
   palette: #F0F4FF #BCCFFF #7CA2FF #4277E0 #2159E5 #0F4CFF
   ===================================================== */
#smart-wordbook-scope {
    margin-top: 0 !important;
}
#smart-wordbook-scope .sw-header {
    position: relative !important;
    overflow: hidden !important;
    padding: 64px 16px 54px 16px !important;
    margin-top: 0 !important;
    background:
        radial-gradient(1000px 420px at 12% -10%, rgba(124, 162, 255, 0.55), transparent 60%),
        radial-gradient(900px 420px at 88% 0%, rgba(15, 76, 255, 0.55), transparent 62%),
        linear-gradient(180deg, var(--djv-primary-mid, #2f63ff) 0%, var(--djv-primary, #0F4CFF) 52%, #0a2f9e 100%) !important;
}
/* fine grid texture over the gradient */
#smart-wordbook-scope .sw-header::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
    mask-image: radial-gradient(80% 70% at 50% 20%, #000 30%, transparent 100%) !important;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 20%, #000 30%, transparent 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
#smart-wordbook-scope .sw-header .sw-hero-glass-card {
    margin-top: 0 !important;
}
#smart-wordbook-scope .sw-backup-radio {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #1e293b !important;
}
#smart-wordbook-scope .sw-backup-radio input { accent-color: var(--djv-primary-dark, #2159E5) !important; }

/* Soft color blobs behind the glass card — the actual palette, blurred */
#smart-wordbook-scope .sw-header-blob {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(50px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
#smart-wordbook-scope .sw-header-blob-1 {
    width: 320px !important;
    height: 320px !important;
    top: -140px !important;
    left: -80px !important;
    background: var(--djv-primary-light, #7CA2FF) !important;
    opacity: 0.45 !important;
    animation: swBlobFloat1 14s ease-in-out infinite !important;
}
#smart-wordbook-scope .sw-header-blob-2 {
    width: 280px !important;
    height: 280px !important;
    top: -100px !important;
    right: -60px !important;
    background: var(--djv-primary, #0F4CFF) !important;
    opacity: 0.35 !important;
    animation: swBlobFloat2 16s ease-in-out infinite !important;
}
#smart-wordbook-scope .sw-header-blob-3 {
    width: 220px !important;
    height: 220px !important;
    bottom: -120px !important;
    left: 40% !important;
    background: var(--djv-primary-pale, #BCCFFF) !important;
    opacity: 0.5 !important;
    animation: swBlobFloat3 12s ease-in-out infinite !important;
}
@keyframes swBlobFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, 24px) scale(1.08); }
}
@keyframes swBlobFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-18px, 20px) scale(1.06); }
}
@keyframes swBlobFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(0, -14px) scale(1.1); }
}

/* The actual glass card holding the whole hero */
#smart-wordbook-scope .sw-hero-glass-card {
    position: relative !important;
    z-index: 2 !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 26px 28px 28px 28px !important;
    background: linear-gradient(160deg, rgba(255,255,255,0.82), rgba(255,255,255,0.62)) !important;
    backdrop-filter: blur(26px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 30px !important;
    box-shadow: 0 30px 60px -22px rgba(6, 32, 108, 0.45),
                0 2px 0 rgba(255,255,255,0.55) inset !important;
    animation: swHeroIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes swHeroIn {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

#smart-wordbook-scope .sw-header-container {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

#smart-wordbook-scope .sw-brand-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

#smart-wordbook-scope .sw-brand-icon {
    background: linear-gradient(135deg, var(--djv-primary-mid, #4277E0), var(--djv-primary, #0F4CFF) 60%, #0a2f9e) !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    position: relative !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(15, 76, 255, 0.35) !important;
}

#smart-wordbook-scope .sw-brand-icon i {
    font-size: 22px !important;
    color: #ffffff !important;
}

#smart-wordbook-scope .sw-main-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #10214f !important;
    background: linear-gradient(100deg, #0a2f9e, var(--djv-primary-dark, #2159E5) 45%, var(--djv-primary, #0F4CFF)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.2px !important;
}

#smart-wordbook-scope .sw-badge-v {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--djv-primary-dark, #2159E5), var(--djv-primary, #0F4CFF)) !important;
    padding: 3px 9px !important;
    border-radius: 99px !important;
}

#smart-wordbook-scope .sw-sub-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4c5a80 !important;
    margin: 3px 0 0 0 !important;
    letter-spacing: 0.2px !important;
}

#smart-wordbook-scope .sw-hero-divider {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(66, 119, 224, 0.25), transparent) !important;
    margin: 18px 0 16px 0 !important;
}

#smart-wordbook-scope .sw-hero-tagline {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    margin: 0 auto 18px auto !important;
    width: fit-content !important;
    padding: 7px 16px !important;
    border-radius: 99px !important;
    background: rgba(33, 89, 229, 0.08) !important;
    border: 1px solid rgba(33, 89, 229, 0.16) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #1b47b8 !important;
    text-align: center !important;
}

#smart-wordbook-scope .sw-hero-tagline-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--djv-primary, #0F4CFF) !important;
    box-shadow: 0 0 8px 2px rgba(15, 76, 255, 0.5) !important;
    animation: swDotPulse 2s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}

@keyframes swDotPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

#smart-wordbook-scope .sw-header-actions {
    display: flex !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 2 !important;
}

#smart-wordbook-scope button {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

#smart-wordbook-scope .sw-header-actions button {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #1b47b8 !important;
    border: 1px solid rgba(33, 89, 229, 0.2) !important;
    padding: 10px 15px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    box-shadow: 0 4px 10px -6px rgba(10, 47, 158, 0.5) !important;
    transition: all 0.25s ease !important;
}

#smart-wordbook-scope .sw-header-actions button:hover {
    background: rgba(33, 89, 229, 0.16) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(33, 89, 229, 0.18) !important;
}

#smart-wordbook-scope .sw-header-actions button.active {
    background: linear-gradient(135deg, var(--djv-primary-dark, #2159E5), var(--djv-primary, #0F4CFF)) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 16px rgba(15, 76, 255, 0.35) !important;
}

#smart-wordbook-scope #adminBtn {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
}

/* SEARCH */
#smart-wordbook-scope .sw-hero-search-wrapper {
    position: relative !important;
    z-index: 10 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

#smart-wordbook-scope .sw-hero-search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 5px !important;
    border: 1px solid rgba(66, 119, 224, 0.22) !important;
    box-shadow: 0 12px 26px -10px rgba(10, 47, 158, 0.35) !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

#smart-wordbook-scope .sw-hero-search-box:focus-within {
    box-shadow: 0 16px 34px -10px rgba(15, 76, 255, 0.45), 0 0 0 4px rgba(15, 76, 255, 0.12) !important;
    border-color: rgba(15, 76, 255, 0.45) !important;
    transform: translateY(-1px) !important;
}

#smart-wordbook-scope .sw-hero-search-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--djv-primary-mid, #4277E0), var(--djv-primary, #0F4CFF)) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    margin: 4px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(15, 76, 255, 0.35) !important;
}

#smart-wordbook-scope .sw-hero-search-box input {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 14px 14px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #10214f !important;
    caret-color: var(--djv-primary, #0F4CFF) !important;
    min-width: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

#smart-wordbook-scope .sw-hero-search-box input::placeholder {
    color: #9ca3af !important;
}

#smart-wordbook-scope .sw-hero-clear-btn {
    background: none !important;
    border: none !important;
    color: #9ca3af !important;
    font-size: 18px !important;
    padding: 8px 12px !important;
    margin-right: 4px !important;
    opacity: 0.7 !important;
}

#smart-wordbook-scope .sw-hero-clear-btn:hover {
    color: #ef4444 !important;
    opacity: 1 !important;
}

/* STATS */
#smart-wordbook-scope .sw-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 16px !important;
    margin-top: 24px !important;
    position: relative !important;
    z-index: 5 !important;
}

#smart-wordbook-scope .sw-stat-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#smart-wordbook-scope .sw-stat-icon-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#smart-wordbook-scope .sw-stat-icon-box i {
    font-size: 16px !important;
}

#smart-wordbook-scope .sw-icon-blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; color: var(--djv-primary-dark, #2159E5) !important; }
#smart-wordbook-scope .sw-icon-teal { background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important; color: #059669 !important; }
#smart-wordbook-scope .sw-icon-amber { background: linear-gradient(135deg, #fef3c7, #fde68a) !important; color: #d97706 !important; }
#smart-wordbook-scope .sw-icon-purple { background: linear-gradient(135deg, #f3e8ff, #e9d5ff) !important; color: #7c3aed !important; }

#smart-wordbook-scope .sw-stat-num {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
}

#smart-wordbook-scope .sw-stat-label {
    font-size: 10px !important;
    color: #6b7280 !important;
    font-weight: 700 !important;
    margin-top: 2px !important;
}

/* CATEGORY FILTER (replaces old "Last Search" stat card) */
#smart-wordbook-scope .sw-stat-card-category {
    min-width: 0 !important;
}
#smart-wordbook-scope .sw-category-select-wrapper {
    min-width: 0 !important;
    flex: 1 !important;
}
#smart-wordbook-scope .sw-category-select {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    padding: 0 !important;
    outline: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
#smart-wordbook-scope .sw-category-select:focus {
    color: #7c3aed !important;
}

/* TOOLBAR */
#smart-wordbook-scope .sw-search-toolbar {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    margin-bottom: 24px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

#smart-wordbook-scope .sw-sort-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#smart-wordbook-scope .sw-sort-wrapper select {
    all: unset !important;
    background: #f0f4ff !important;
    border: 1px solid #bccfff !important;
    padding: 8px 32px 8px 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    cursor: pointer !important;
    appearance: none !important;
}

#smart-wordbook-scope .sw-alphabet-scroll {
    display: flex !important;
    gap: 5px !important;
    overflow-x: auto !important;
    flex: 1 !important;
    padding-bottom: 4px !important;
}

#smart-wordbook-scope #alphabetContainer {
    display: inline-flex !important;
    gap: 5px !important;
}

#smart-wordbook-scope .sw-letter-btn {
    background: #f0f4ff !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    border: 1px solid #e5e7eb !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

#smart-wordbook-scope .sw-letter-btn:hover:not(.empty) {
    background: var(--djv-primary-dark, #2159E5) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(33, 89, 229, 0.25) !important;
}

#smart-wordbook-scope .sw-letter-btn.active {
    background: linear-gradient(135deg, var(--djv-primary-dark, #2159E5), #3b82f6) !important;
    color: #ffffff !important;
    border-color: var(--djv-primary-dark, #2159E5) !important;
    box-shadow: 0 4px 12px rgba(33, 89, 229, 0.3) !important;
}

#smart-wordbook-scope .sw-letter-btn.empty {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

/* WORD LIST — refined card layout */
#smart-wordbook-scope .sw-list-space {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 8px 16px 24px !important;
}

#smart-wordbook-scope .sw-word-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e8eef7 !important;
    border-left: 3px solid var(--djv-primary, #0F4CFF) !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 76, 255, 0.04) !important;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease !important;
}

#smart-wordbook-scope .sw-word-card:hover {
    box-shadow: 0 4px 16px rgba(15, 76, 255, 0.10), 0 8px 28px rgba(15, 23, 42, 0.06) !important;
    transform: translateY(-2px) !important;
    border-color: #d0dcf5 !important;
}

#smart-wordbook-scope .sw-card-header {
    padding: 16px 18px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

#smart-wordbook-scope .sw-word-trigger {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    cursor: pointer !important;
    flex-grow: 1 !important;
}

#smart-wordbook-scope .sw-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#smart-wordbook-scope .sw-word-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    font-style: normal !important;
}

#smart-wordbook-scope .sw-btn-speaker {
    background: none !important;
    border: none !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    padding: 2px !important;
    font-size: 13px !important;
}

#smart-wordbook-scope .sw-pos-tag {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
}

#smart-wordbook-scope .sw-meaning-row {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#smart-wordbook-scope .sw-action-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#smart-wordbook-scope .sw-btn-icon {
    background: none !important;
    border: 1px solid #e5e7eb !important;
    color: #9ca3af !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

#smart-wordbook-scope .sw-btn-icon:hover {
    background: #f0f4ff !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    border-color: #bccfff !important;
}

#smart-wordbook-scope .sw-btn-icon.bookmarked {
    color: #f59e0b !important;
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

#smart-wordbook-scope .sw-btn-icon.danger:hover {
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border-color: #fca5a5 !important;
}

#smart-wordbook-scope .sw-chevron-btn {
    background: #f0f4ff !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}

#smart-wordbook-scope .sw-chevron-btn:hover {
    background: var(--djv-primary-dark, #2159E5) !important;
    color: #ffffff !important;
}

/* ACCORDION */
#smart-wordbook-scope .accordion-content {
    display: grid !important;
    grid-template-rows: 0fr !important;
    /* Belt-and-suspenders alongside grid-template-rows: 0fr — some browser/
       theme combinations don't fully collapse a 0fr row when its child has
       padding, leaving a visible sliver of white space. An explicit
       max-height: 0 guarantees zero rendered height either way. */
    max-height: 0 !important;
    overflow: hidden !important;
    background: #fafbfd !important;
    opacity: 0 !important;
    border-top: 1px solid transparent !important;
    visibility: hidden !important;
    will-change: grid-template-rows, max-height, opacity !important;
    transition: grid-template-rows 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0s linear 0.6s !important;
}

#smart-wordbook-scope .accordion-content.open {
    visibility: visible !important;
    transition: grid-template-rows 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0s linear 0s !important;
    grid-template-rows: 1fr !important;
    max-height: 1000px !important;
    opacity: 1 !important;
    border-top-color: #f1f5f9 !important;
}

#smart-wordbook-scope .sw-accordion-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 14px !important;
    padding: 16px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#smart-wordbook-scope .sw-accordion-subcard {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px !important;
    border: 1px solid #e2e8f0 !important;
}

#smart-wordbook-scope .sw-subcard-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
}

#smart-wordbook-scope .sw-subcard-title.red {
    color: #ef4444 !important;
}

#smart-wordbook-scope .sw-badge-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

#smart-wordbook-scope .sw-badge-syn {
    background: #f0f4ff !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    border: 1px solid #bccfff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 99px !important;
}

#smart-wordbook-scope .sw-badge-ant {
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border: 1px solid #fca5a5 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 99px !important;
}

/* MNEMONIC */
#smart-wordbook-scope .sw-card-mnemonic {
    background: rgba(254, 243, 199, 0.3) !important;
    border-top: 1px solid #fef3c7 !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

#smart-wordbook-scope .sw-mnemonic-icon-wrapper {
    background: #fef3c7 !important;
    color: #d97706 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#smart-wordbook-scope .sw-mnemonic-hint {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #92400e !important;
    margin-bottom: 2px !important;
}

#smart-wordbook-scope .sw-mnemonic-content {
    font-size: 13px !important;
    color: #374151 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* ADMIN PANEL */
#smart-wordbook-scope .sw-admin-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

#smart-wordbook-scope .sw-admin-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}

#smart-wordbook-scope .sw-form-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}

#smart-wordbook-scope .sw-form-group {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 12px !important;
}

#smart-wordbook-scope .sw-form-group label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #4b5563 !important;
    margin-bottom: 4px !important;
}

#smart-wordbook-scope input[type='text'],
#smart-wordbook-scope textarea {
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    color: #1f2937 !important;
    width: 100% !important;
    font-family: inherit !important;
}

#smart-wordbook-scope .sw-form-group select,
#smart-wordbook-scope #inputCategory,
#smart-wordbook-scope #inputStatus {
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    color: #1f2937 !important;
    width: 100% !important;
    font-family: inherit !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
}

#smart-wordbook-scope .sw-form-group select option,
#smart-wordbook-scope #inputCategory option,
#smart-wordbook-scope #inputStatus option {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

#smart-wordbook-scope .sw-mnemonic-box {
    background: #f0f4ff !important;
    border: 1px solid #bccfff !important;
    padding: 14px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
}

#smart-wordbook-scope .sw-form-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

#smart-wordbook-scope .sw-btn-group {
    display: flex !important;
    gap: 8px !important;
}

/* BUTTONS */
#smart-wordbook-scope .sw-btn-success {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px #bccfff91 !important;
}

#smart-wordbook-scope .sw-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px #bccfff91 !important;
}

#smart-wordbook-scope .sw-btn-gray {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

#smart-wordbook-scope .sw-btn-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* When sw-btn-secondary lives inside a light-background admin surface,
   the transparent-white base blends into the panel. Give it a solid,
   readable look scoped to those surfaces. */
#smart-wordbook-scope .sw-admin-panel .sw-btn-secondary,
#smart-wordbook-scope .sw-bulk-action-bar .sw-btn-secondary,
#smart-wordbook-scope .sw-bulk-manager .sw-btn-secondary {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
#smart-wordbook-scope .sw-admin-panel .sw-btn-secondary:hover,
#smart-wordbook-scope .sw-bulk-action-bar .sw-btn-secondary:hover,
#smart-wordbook-scope .sw-bulk-manager .sw-btn-secondary:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

#smart-wordbook-scope .sw-btn-link {
    background: none !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

#smart-wordbook-scope .sw-btn-cancel {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

#smart-wordbook-scope .sw-btn-delete {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

#smart-wordbook-scope .sw-btn-reset {
    background: linear-gradient(135deg, var(--djv-primary-dark, #2159E5), #3b82f6) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(33, 89, 229, 0.25) !important;
}

/* MODALS */
#smart-wordbook-scope .sw-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    z-index: 99999 !important;
    transition: background 0.3s ease !important;
}

#smart-wordbook-scope .sw-modal-content {
    background: #ffffff !important;
    border-radius: 16px 0 0 16px !important;
    padding: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18) !important;
    overflow-y: auto !important;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    margin: 0 !important;
}

#smart-wordbook-scope .sw-modal:not(.sw-hidden) .sw-modal-content {
    transform: translateX(0);
}

#smart-wordbook-scope .sw-modal-large {
    max-width: 100% !important;
}

#smart-wordbook-scope .sw-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}

#smart-wordbook-scope .sw-modal-close-x {
    background: none !important;
    border: none !important;
    color: #6b7280 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 0 !important;
}

#smart-wordbook-scope .sw-modal-footer {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
}

/* LEARNING MODES — slide-in full page from right */
#smart-wordbook-scope .sw-learning-modes-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    z-index: 9998 !important;
    transition: background 0.3s ease !important;
}

#smart-wordbook-scope .sw-learning-modes-panel .sw-modal-content,
#smart-wordbook-scope .sw-learning-modes-panel .sw-modes-sheet {
    background: #ffffff !important;
    border-radius: 16px 0 0 16px !important;
    padding: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18) !important;
    overflow-y: auto !important;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    margin: 0 !important;
}

#smart-wordbook-scope .sw-learning-modes-panel:not(.sw-hidden) .sw-modal-content,
#smart-wordbook-scope .sw-learning-modes-panel:not(.sw-hidden) .sw-modes-sheet {
    transform: translateX(0);
}

#smart-wordbook-scope .sw-modes-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 20px !important;
}

#smart-wordbook-scope .sw-modes-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 14px !important;
}

#smart-wordbook-scope .sw-mode-card {
    background: linear-gradient(135deg, #f0f4ff, #ffffff) !important;
    border: 2px solid #bccfff !important;
    border-radius: 14px !important;
    padding: 20px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#smart-wordbook-scope .sw-mode-card:hover {
    background: linear-gradient(135deg, var(--djv-primary-dark, #2159E5), #3b82f6) !important;
    color: #ffffff !important;
    border-color: var(--djv-primary-dark, #2159E5) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(33, 89, 229, 0.3) !important;
}

#smart-wordbook-scope .sw-mode-icon {
    font-size: 32px !important;
    margin-bottom: 8px !important;
    color: var(--djv-primary-dark, #2159E5) !important;
}

#smart-wordbook-scope .sw-mode-card:hover .sw-mode-icon {
    color: #ffffff !important;
}

#smart-wordbook-scope .sw-mode-card h4 {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin: 8px 0 4px 0 !important;
    color: #1f2937 !important;
}

#smart-wordbook-scope .sw-mode-card:hover h4 {
    color: #ffffff !important;
}

#smart-wordbook-scope .sw-mode-card p {
    font-size: 11px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

#smart-wordbook-scope .sw-mode-card:hover p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* FLASHCARD */
#smart-wordbook-scope .sw-flashcard-header {
    margin-bottom: 20px !important;
}

#smart-wordbook-scope .sw-flashcard-progress {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

#smart-wordbook-scope .sw-progress-bar {
    flex: 1 !important;
    height: 6px !important;
    background: #f3f4f6 !important;
    border-radius: 99px !important;
    overflow: hidden !important;
}

#smart-wordbook-scope .sw-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--djv-primary-dark, #2159E5), #3b82f6) !important;
    transition: width 0.3s ease !important;
}

#smart-wordbook-scope .sw-flashcard-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 300px !important;
    margin: 30px 0 !important;
    /* A larger perspective flattens the 3D warp so the card reads as a
       gentle turn rather than a sharp, distorted swing — easier on the eye,
       especially on smaller mobile screens. */
    perspective: 1800px !important;
    -webkit-perspective: 1800px !important;
    /* Clips the card lane so the "next card" swap slides fully out of view
       instead of fading through transparency (which blended the colored
       gradient into the white modal behind it and read as a light flash). */
    overflow: hidden !important;
    position: relative !important;
}

#smart-wordbook-scope .sw-flashcard {
    width: 100% !important;
    max-width: 400px !important;
    height: 250px !important;
    /* Belt-and-suspenders centering — the parent .sw-flashcard-container
       already centers via flexbox, but margin: 0 auto keeps the card
       centered (in both the normal and .flipped state) even if the card
       ever ends up in a non-flex ancestor, or if a leftover inline
       transform briefly shifts it during the card-swap. */
    margin: 0 auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
    /* Transform-only transition — no opacity here on purpose. The card must
       stay fully visible for the entire flick-away motion (no fade-out),
       and the next card must simply be there with no fade-in. */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
}

/* "জানি / জানি না" (know / don't know) card-swap animation. The current
   card flicks up toward the top-right corner with a slight rotation —
   like flicking a physical card away — using translate + rotate only,
   staying fully opaque the whole time (no fade-out). Once it's off-screen,
   content is swapped and the card is snapped back to its resting transform
   instantly (see .sw-fc-no-transition in JS) so the next card is simply
   there — no slide-in, no fade-in. Scoped to .sw-embedded-fc on purpose —
   this flick/slide motion belongs to the Embedded Section widget only.
   Exam Mode and the standalone flashcard mode never get this class from
   JS, and this selector further guarantees no slide/flick animation can
   ever render there, on desktop or mobile. */
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard.sw-fc-exit {
    transform: translate(140%, -120%) rotate(22deg) !important;
}

/* Used momentarily to reset the exited card back to its resting transform
   with zero animation, so the next card's arrival is instantaneous. */
#smart-wordbook-scope .sw-flashcard.sw-fc-no-transition {
    transition: none !important;
}

#smart-wordbook-scope .sw-flashcard-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    /* Standard material easing (slow-in, slow-out) instead of the browser's
       default "ease" curve, which snaps a bit at the start and end — this
       reads as a calmer, more deliberate turn, closer to a native card-flip.
       transform: translateZ(0) forces the browser to keep this element on
       its own stable GPU layer for the whole rotation instead of
       re-rasterizing it every frame — without it, 3D rotations can
       visibly judder/"shake" as the compositor recalculates the layer. */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
}

#smart-wordbook-scope .sw-flashcard.flipped .sw-flashcard-inner {
    transform: rotateY(180deg) translateZ(0) !important;
    -webkit-transform: rotateY(180deg) translateZ(0) !important;
}

#smart-wordbook-scope .sw-flashcard-front,
#smart-wordbook-scope .sw-flashcard-back {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    /* Each face gets its own stable GPU layer too — without this, the face
       that's rotating out of view can still visibly flicker/shake right at
       the 90° mark where backface-visibility kicks in. */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 14px !important;
    padding: 20px !important;
    text-align: center !important;
}

#smart-wordbook-scope .sw-flashcard-front {
    background: linear-gradient(135deg, var(--djv-primary-dark, #2159E5), #3b82f6) !important;
    color: #ffffff !important;
}

#smart-wordbook-scope .sw-flashcard-back {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    color: #ffffff !important;
    transform: rotateY(180deg) translateZ(0) !important;
    -webkit-transform: rotateY(180deg) translateZ(0) !important;
}

#smart-wordbook-scope .sw-fc-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    opacity: 0.8 !important;
    margin-bottom: 8px !important;
}

#smart-wordbook-scope .sw-flashcard-front p,
#smart-wordbook-scope .sw-flashcard-back p {
    font-size: 28px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

#smart-wordbook-scope .sw-flashcard-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* QUIZ HEADER/BODY/FOOTER */
#smart-wordbook-scope .sw-quiz-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 20px !important;
}

#smart-wordbook-scope .sw-quiz-body {
    margin: 20px 0 !important;
}

#smart-wordbook-scope .sw-quiz-question {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 20px !important;
}

#smart-wordbook-scope .sw-quiz-footer {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 20px !important;
}

/* QUIZ OPTIONS - ENHANCED */
#smart-wordbook-scope .sw-quiz-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

#smart-wordbook-scope .sw-quiz-opt {
    background: #ffffff !important;
    border-radius: 14px !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    position: relative !important;
    overflow: hidden !important;
}


#smart-wordbook-scope .sw-opt-letter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: #f0f4ff !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    transition: all 0.2s !important;
}

#smart-wordbook-scope .sw-opt-text {
    flex: 1 !important;
    line-height: 1.4 !important;
}



#smart-wordbook-scope .sw-quiz-opt.correct {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    color: #14532d !important;
    border-color: #16a34a !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.2) !important;
}

#smart-wordbook-scope .sw-quiz-opt.correct .sw-opt-letter {
    background: #16a34a !important;
    color: #fff !important;
}

#smart-wordbook-scope .sw-quiz-opt.wrong {
    background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
    color: #7f1d1d !important;
    border-color: #ef4444 !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.2) !important;
}

#smart-wordbook-scope .sw-quiz-opt.wrong .sw-opt-letter {
    background: #ef4444 !important;
    color: #fff !important;
}

#smart-wordbook-scope .sw-ans-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    background: rgba(255,255,255,0.5) !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    margin-left: 6px !important;
    font-weight: 700 !important;
}

#smart-wordbook-scope .sw-quiz-option {
    background: #f3f4f6 !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

#smart-wordbook-scope .sw-quiz-option:hover {
    background: #f0f4ff !important;
    border-color: #e5e7eb !important;
}

#smart-wordbook-scope .sw-quiz-option.selected {
    background: var(--djv-primary-dark, #2159E5) !important;
    color: #ffffff !important;
    border-color: var(--djv-primary-dark, #2159E5) !important;
}

/* FLASHCARD MNEMONIC */
#smart-wordbook-scope .sw-fc-mnemonic {
    display: none !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 24px !important;
    background: rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.95) !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* PARAGRAPH SECTION ON WORD CARD */
#smart-wordbook-scope .sw-card-paragraph {
    display: grid !important;
    grid-template-rows: 0fr !important;
    max-height: 0 !important;
    overflow: hidden !important;
    background: #f0fdf4 !important;
    opacity: 0 !important;
    border-top: 1px solid transparent !important;
    visibility: hidden !important;
    will-change: grid-template-rows, max-height, opacity !important;
    transition: grid-template-rows 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0s linear 0.6s !important;
}

#smart-wordbook-scope .sw-card-paragraph.sw-para-open {
    visibility: visible !important;
    transition: grid-template-rows 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0s linear 0s !important;
    grid-template-rows: 1fr !important;
    max-height: 1000px !important;
    opacity: 1 !important;
    border-top-color: #f0fdf4 !important;
}

#smart-wordbook-scope .sw-paragraph-inner {
    max-width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 14px 16px !important;
}

#smart-wordbook-scope .sw-paragraph-header {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #16a34a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#smart-wordbook-scope .sw-paragraph-text {
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 1.7 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    white-space: pre-wrap !important;
}

#smart-wordbook-scope .sw-btn-icon.active-para {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #86efac !important;
}

/* BATCH DONE TAG */
#smart-wordbook-scope .sw-batch-done-tag-float {
    position: absolute !important;
    top: -19px !important;
    right: 60px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #888 !important;
    border: 2px solid #ffffff !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    z-index: 5 !important;
}

/* FILL BLANKS */
#smart-wordbook-scope .sw-fill-blanks-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 20px !important;
}

#smart-wordbook-scope .sw-fill-blanks-body {
    margin: 30px 0 !important;
}

#smart-wordbook-scope .sw-fill-blanks-question {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 20px !important;
    line-height: 1.6 !important;
}

#smart-wordbook-scope #fillBlanksInput {
    font-size: 16px !important;
    padding: 12px 16px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 10px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

#smart-wordbook-scope .sw-fill-blanks-hint {
    font-size: 12px !important;
    color: #6b7280 !important;
    padding: 10px 12px !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}

#smart-wordbook-scope .sw-fill-blanks-footer {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 20px !important;
}

/* RESULTS */
#smart-wordbook-scope .sw-results-header {
    text-align: center !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 20px !important;
}

#smart-wordbook-scope .sw-results-trophy {
    font-size: 64px !important;
    margin-bottom: 12px !important;
}

#smart-wordbook-scope .sw-results-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

#smart-wordbook-scope .sw-result-stat {
    background: #f9fafb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    text-align: center !important;
}

#smart-wordbook-scope .sw-result-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    margin-bottom: 6px !important;
}

#smart-wordbook-scope .sw-result-value {
    display: block !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
}

#smart-wordbook-scope .sw-result-value.sw-correct {
    color: #16a34a !important;
}

#smart-wordbook-scope .sw-result-value.sw-wrong {
    color: #ef4444 !important;
}

#smart-wordbook-scope .sw-results-footer {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* EMPTY STATE */
#smart-wordbook-scope .sw-empty-card {
    text-align: center !important;
    padding: 48px 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

#smart-wordbook-scope .sw-empty-icon {
    font-size: 48px !important;
    color: #d1d5db !important;
    margin-bottom: 16px !important;
}

#smart-wordbook-scope .sw-empty-card h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
}

#smart-wordbook-scope .sw-empty-card p {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-bottom: 20px !important;
}

/* TOAST */
#smart-wordbook-scope #toastContainer {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#smart-wordbook-scope .sw-toast {
    padding: 10px 16px !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    animation: swToastFadeIn 0.3s ease-out !important;
}

#smart-wordbook-scope .sw-toast-success { background: linear-gradient(135deg, #16a34a, #22c55e) !important; }
#smart-wordbook-scope .sw-toast-error { background: linear-gradient(135deg, #dc2626, #ef4444) !important; }
#smart-wordbook-scope .sw-toast-info { background: linear-gradient(135deg, var(--djv-primary-dark, #2159E5), #3b82f6) !important; }

#smart-wordbook-scope .sw-toast-fade-out {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: all 0.3s ease-in !important;
}

@keyframes swToastFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

#smart-wordbook-scope .rotate-icon {
    transition: transform 0.2s ease !important;
}

#smart-wordbook-scope .rotate-icon.open {
    transform: rotate(180deg) !important;
}

/* MODAL ACTIONS */
#smart-wordbook-scope .sw-modal-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin-top: 20px !important;
}

/* ERROR BANNER */
#smart-wordbook-scope .sw-error-banner {
    background: #fef2f2 !important;
    color: #991b1b !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #fca5a5 !important;
    margin-top: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* RESPONSIVE */
@media (max-width: 640px) {
    #smart-wordbook-scope .sw-header {
        padding: 18px 10px 24px 10px !important;
    }

    #smart-wordbook-scope .sw-hero-glass-card {
        padding: 16px 16px !important;
        border-radius: 20px !important;
    }

    #smart-wordbook-scope .sw-main-title {
        font-size: 16px !important;
    }

    #smart-wordbook-scope .sw-hero-tagline {
        font-size: 10.5px !important;
        text-align: center !important;
    }

    #smart-wordbook-scope .sw-header-blob-3 {
        display: none !important;
    }

    #smart-wordbook-scope .sw-stats-grid {
        margin-top: 16px !important;
        padding: 0 12px !important;
    }

    #smart-wordbook-scope .sw-search-toolbar {
        margin: 0 12px 20px 12px !important;
    }

    #smart-wordbook-scope .sw-list-space {
        padding: 0 12px !important;
    }

    #smart-wordbook-scope .sw-modes-grid {
        grid-template-columns: 1fr !important;
    }

    #smart-wordbook-scope .sw-flashcard-front p,
    #smart-wordbook-scope .sw-flashcard-back p {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    #smart-wordbook-scope .sw-header-actions {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    #smart-wordbook-scope .sw-header-actions button {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }



    #smart-wordbook-scope .sw-accordion-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
   CRITICAL: sw-hidden MUST be at the very end so it
   overrides all display:flex !important rules above.
   ===================================================== */

/* FILL BLANKS LABEL */
#smart-wordbook-scope .sw-fill-blanks-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin: 0 0 8px 0 !important;
}

/* BATCH MODE CARD */
#smart-wordbook-scope .sw-mode-batch {
    background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
    border-color: #fdba74 !important;
}
#smart-wordbook-scope .sw-mode-batch .sw-mode-icon { color: #ea580c !important; }
#smart-wordbook-scope .sw-mode-batch:hover {
    background: linear-gradient(135deg, #ea580c, #f97316) !important;
    border-color: #ea580c !important;
    box-shadow: 0 12px 24px rgba(234,88,12,0.3) !important;
}
#smart-wordbook-scope .sw-mode-batch:hover .sw-mode-icon,
#smart-wordbook-scope .sw-mode-batch:hover h4,
#smart-wordbook-scope .sw-mode-batch:hover p { color: #ffffff !important; }

/* FAVORITES EXAM MODE CARD */
#smart-wordbook-scope .sw-mode-fav {
    background: linear-gradient(135deg, #eff4ff, #ffffff) !important;
    border-color: #7CA2FF !important;
}
#smart-wordbook-scope .sw-mode-fav .sw-mode-icon { color: var(--djv-primary-dark, #2159E5) !important; }
#smart-wordbook-scope .sw-mode-fav:hover {
    background: linear-gradient(135deg, var(--djv-primary-dark, #2159E5), var(--djv-primary, #0F4CFF)) !important;
    border-color: #0F4CFF !important;
    box-shadow: 0 12px 24px rgba(15,76,255,0.3) !important;
}
#smart-wordbook-scope .sw-mode-fav:hover .sw-mode-icon,
#smart-wordbook-scope .sw-mode-fav:hover h4,
#smart-wordbook-scope .sw-mode-fav:hover p { color: #ffffff !important; }
#smart-wordbook-scope .sw-mode-fav.sw-mode-disabled { opacity: 0.45 !important; filter: grayscale(0.4) !important; }

/* =====================================================
   CATEGORY MANAGER (admin dashboard)
   ===================================================== */
#smart-wordbook-scope .sw-category-manager,
#smart-wordbook-scope .sw-bulk-manager {
    margin-top: 20px !important;
    padding: 18px !important;
    background: linear-gradient(135deg, #F0F4FF, #ffffff) !important;
    border: 1px solid #BCCFFF !important;
    border-radius: 16px !important;
}
#smart-wordbook-scope .sw-cat-mgr-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}
#smart-wordbook-scope .sw-cat-mgr-header h3 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1e3a8a !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#smart-wordbook-scope .sw-cat-mgr-add {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}
#smart-wordbook-scope .sw-cat-mgr-add input {
    flex: 1 !important;
    padding: 10px 14px !important;
    border: 1px solid #BCCFFF !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
}
#smart-wordbook-scope .sw-cat-mgr-add input:focus {
    outline: none !important;
    border-color: var(--djv-primary-dark, #2159E5) !important;
    box-shadow: 0 0 0 3px rgba(33,89,229,0.12) !important;
}
#smart-wordbook-scope .sw-cat-mgr-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
#smart-wordbook-scope .sw-cat-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
}
#smart-wordbook-scope .sw-cat-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e3a8a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#smart-wordbook-scope .sw-cat-count {
    color: #64748b !important;
    font-weight: 600 !important;
}
#smart-wordbook-scope .sw-cat-row-actions {
    display: flex !important;
    gap: 6px !important;
}
#smart-wordbook-scope .sw-cat-row-actions .sw-btn-icon {
    background: #f1f5f9 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
}

/* BULK MANAGER PANEL */
#smart-wordbook-scope .sw-bulk-hint {
    font-size: 12px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
#smart-wordbook-scope #bulkModeToggleBtn {
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    color: #78350f !important;
    border: 1px solid #f59e0b !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2) !important;
}
#smart-wordbook-scope #bulkModeToggleBtn:hover {
    background: linear-gradient(135deg, #fde68a, #fcd34d) !important;
    border-color: #d97706 !important;
}
#smart-wordbook-scope #bulkModeToggleBtn.active {
    background: linear-gradient(135deg, var(--djv-primary-dark, #2159E5), var(--djv-primary, #0F4CFF)) !important;
    color: #ffffff !important;
    border-color: #0F4CFF !important;
    box-shadow: 0 4px 14px rgba(33, 89, 229, 0.35) !important;
}

/* "ক্যাটেগরিও মুছুন" checkbox label — sits next to the delete-by-category button */
#smart-wordbook-scope .sw-bulk-remove-cat-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #7f1d1d !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
}
#smart-wordbook-scope .sw-bulk-remove-cat-label input[type='checkbox'] {
    accent-color: #dc2626 !important;
    cursor: pointer !important;
}

/* BULK ACTION BAR (sticky over word list) */
#smart-wordbook-scope .sw-bulk-action-bar {
    position: sticky !important;
    top: 8px !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid #7CA2FF !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(33,89,229,0.15) !important;
}
#smart-wordbook-scope .sw-bulk-select-all {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e3a8a !important;
    cursor: pointer !important;
}
#smart-wordbook-scope .sw-bulk-select-all input[type="checkbox"] {
    all: revert !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--djv-primary-dark, #2159E5) !important;
    cursor: pointer !important;
}
#smart-wordbook-scope .sw-bulk-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
#smart-wordbook-scope .sw-bulk-cat-delete-row {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #e2e8f0 !important;
}
#smart-wordbook-scope .sw-bulk-cat-select {
    padding: 8px 10px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    background: #ffffff !important;
}

/* WORD CARD: checkbox + draft badge + category badge */
#smart-wordbook-scope .sw-word-select-wrap {
    display: flex !important;
    align-items: center !important;
    padding: 0 4px 0 0 !important;
    cursor: pointer !important;
}
#smart-wordbook-scope .sw-word-select-chk {
    all: revert !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--djv-primary-dark, #2159E5) !important;
    cursor: pointer !important;
}
#smart-wordbook-scope .sw-word-card.sw-is-draft {
    background: repeating-linear-gradient(135deg, #fffbeb, #fffbeb 10px, #fff7e6 10px, #fff7e6 20px) !important;
    border: 1px dashed #f59e0b !important;
}
#smart-wordbook-scope .sw-draft-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #92400e !important;
    background: #fef3c7 !important;
    border: 1px solid #fcd34d !important;
    padding: 2px 8px !important;
    border-radius: 99px !important;
}
#smart-wordbook-scope .sw-cat-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2159E5, #4277E0) !important;
    padding: 2px 9px !important;
    border-radius: 99px !important;
    letter-spacing: 0.3px !important;
}

/* BATCH PHASE BANNER */
#smart-wordbook-scope .sw-batch-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}
#smart-wordbook-scope .sw-batch-banner-inner {
    background: linear-gradient(135deg, #0f4cff, #2159E5) !important;
    color: #fff !important;
    padding: 14px 32px !important;
    border-radius: 0 0 20px 20px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    box-shadow: 0 8px 24px rgba(15,76,255,0.35) !important;
    animation: swBannerDrop 0.4s cubic-bezier(.22,.68,0,1.2) !important;
}
@keyframes swBannerDrop {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* BATCH BREAKDOWN */
#smart-wordbook-scope .sw-batch-breakdown {
    margin-top: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 12px !important;
}
#smart-wordbook-scope .sw-breakdown-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 0 !important;
    color: #374151 !important;
    border-bottom: 1px solid #f9fafb !important;
}

/* IMPORT TABS */
#smart-wordbook-scope .sw-import-tabs {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
    border-bottom: 2px solid #f1f5f9 !important;
}
#smart-wordbook-scope .sw-import-tab {
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    margin-bottom: -2px !important;
    border-radius: 0 !important;
}
#smart-wordbook-scope .sw-import-tab.active {
    color: var(--djv-primary-dark, #2159E5) !important;
    border-bottom-color: var(--djv-primary-dark, #2159E5) !important;
}
#smart-wordbook-scope .sw-import-panel { padding: 4px 0 !important; }

/* FILE DROP ZONE */
#smart-wordbook-scope .sw-file-drop-zone {
    display: block !important;
    border: 2px dashed #bccfff !important;
    border-radius: 14px !important;
    background: #f0f4ff !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-align: center !important;
    padding: 32px 20px !important;
}
#smart-wordbook-scope .sw-file-drop-zone:hover {
    border-color: var(--djv-primary-dark, #2159E5) !important;
    background: #e8eeff !important;
}
#smart-wordbook-scope .sw-file-drop-inner i {
    font-size: 36px !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    margin-bottom: 10px !important;
    display: block !important;
}
#smart-wordbook-scope .sw-file-drop-inner p {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin: 0 0 6px 0 !important;
}
#smart-wordbook-scope .sw-file-name-label {
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
}
#smart-wordbook-scope .sw-file-preview {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-top: 10px !important;
}
#smart-wordbook-scope .sw-preview-badge {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #16a34a !important;
}

/* SCORE HISTORY */
#smart-wordbook-scope .sw-score-loading {
    text-align: center !important;
    padding: 24px !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
#smart-wordbook-scope .sw-score-empty {
    text-align: center !important;
    padding: 32px 16px !important;
    color: #9ca3af !important;
    font-size: 14px !important;
}
#smart-wordbook-scope .sw-score-summary {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    background: #f0f4ff !important;
    border-radius: 12px !important;
    padding: 14px !important;
}
#smart-wordbook-scope .sw-score-summary-item { text-align: center !important; }
#smart-wordbook-scope .sw-score-sum-val {
    display: block !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
}
#smart-wordbook-scope .sw-score-sum-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    display: block !important;
    margin-top: 2px !important;
}
#smart-wordbook-scope .sw-score-list {
    max-height: 280px !important;
    overflow-y: auto !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}
#smart-wordbook-scope .sw-score-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 12px !important;
}
#smart-wordbook-scope .sw-score-row:last-child { border-bottom: none !important; }
#smart-wordbook-scope .sw-score-num { width: 20px !important; color: #9ca3af !important; font-weight: 700 !important; flex-shrink: 0 !important; }
#smart-wordbook-scope .sw-score-mode { flex: 1 !important; font-weight: 700 !important; color: #374151 !important; }
#smart-wordbook-scope .sw-score-frac { color: #6b7280 !important; font-weight: 600 !important; }
#smart-wordbook-scope .sw-score-pct { font-weight: 800 !important; min-width: 44px !important; text-align: right !important; }
#smart-wordbook-scope .sw-score-date { color: #9ca3af !important; font-size: 10px !important; flex-shrink: 0 !important; }
#smart-wordbook-scope .sw-warn { color: #d97706 !important; }

/* Simplified Score History */
#smart-wordbook-scope .sw-score-simple {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    padding: 24px !important;
}
#smart-wordbook-scope .sw-score-simple-item {
    text-align: center !important;
    background: #f0f4ff !important;
    border-radius: 14px !important;
    padding: 20px 28px !important;
    min-width: 120px !important;
}
#smart-wordbook-scope .sw-score-simple-num {
    display: block !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
}
#smart-wordbook-scope .sw-score-simple-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    margin-top: 4px !important;
}

/* RESULT GRAPHICAL PERCENTAGE */
#smart-wordbook-scope .sw-result-graph-wrapper {
    margin: 20px 0 !important;
    padding: 16px !important;
    background: #f8fafc !important;
    border-radius: 14px !important;
    text-align: center !important;
}
#smart-wordbook-scope .sw-result-graph-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
#smart-wordbook-scope .sw-result-graph-bar-bg {
    width: 100% !important;
    height: 24px !important;
    background: #e2e8f0 !important;
    border-radius: 99px !important;
    overflow: hidden !important;
    position: relative !important;
}
#smart-wordbook-scope .sw-result-graph-bar {
    height: 100% !important;
    background: linear-gradient(90deg, var(--djv-primary-dark, #2159E5), #3b82f6) !important;
    border-radius: 99px !important;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}
#smart-wordbook-scope .sw-result-graph-text {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    margin-top: 10px !important;
}

/* BATCH GROUP CLEAN HEADER */
#smart-wordbook-scope .sw-batch-group-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
#smart-wordbook-scope .sw-batch-range {
    font-size: 13px !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
}

#smart-wordbook-scope .sw-hidden {
    display: none !important;
}
#smart-wordbook-scope .sw-smart-badge {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: #14b8a6 !important;
    color: white !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
#smart-wordbook-scope .sw-fc-hint {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin-top: 15px !important;
    font-weight: 500 !important;
}
#smart-wordbook-scope .sw-flashcard-front, #smart-wordbook-scope .sw-flashcard-back {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
#smart-wordbook-scope .sw-modal.sw-embedded-fc {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#smart-wordbook-scope .sw-modal.sw-embedded-fc .sw-modal-content {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
}

/* ==========================================================================
   EMBEDDED FLASHCARD — LAYERED CARD-STACK DESIGN
   ========================================================================== */
/* Scoped border-box reset — several rules below combine an explicit/
   percentage height with padding (e.g. .sw-fc-stack, .sw-flashcard-front/
   back). Without this, the theme's default content-box sizing makes
   padding ADD to the declared height instead of being absorbed by it,
   which is what caused the card to balloon past its intended 300px and
   slide out past the bottom of the container. This reset makes every
   height/padding combination in the widget behave as "the box is exactly
   this tall, padding included" — matching what every rule below assumes. */
#smart-wordbook-scope, #smart-wordbook-scope *, #smart-wordbook-scope *::before, #smart-wordbook-scope *::after {
    box-sizing: border-box !important;
}
#smart-wordbook-scope .sw-fc-stack { position: relative !important; width: 100% !important; }
#smart-wordbook-scope .sw-fc-layer { display: none !important; }
#smart-wordbook-scope .sw-fc-speaker { display: none !important; }
#smart-wordbook-scope .sw-fc-mute { display: none !important; }
#smart-wordbook-scope .sw-fc-bookmark { display: none !important; }
#smart-wordbook-scope .sw-btn-reveal { display: none !important; }

#smart-wordbook-scope .sw-modal.sw-embedded-fc .sw-modal-content {
    border-radius: 22px !important;
    padding: 18px 16px 20px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

/* Header — centered, responsive */
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}
/* Hide the entire header row in embedded mode */
#smart-wordbook-scope .sw-embedded-fc .sw-fc-non-embedded-header {
    display: none !important;
}
/* Hide badge entirely in embedded mode */
#smart-wordbook-scope .sw-embedded-fc #smartModeBadge {
    display: none !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-modal-progress-container {
    position: static !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
}
#smart-wordbook-scope .sw-embedded-fc #flashcardCount {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #4277E0 !important;
    letter-spacing: 0.2px !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-progress-bar {
    width: 100% !important;
    flex: none !important;
    height: 4px !important;
    background: #F0F4FF !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-progress-fill {
    background: var(--djv-primary-pale, #BCCFFF) !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-smart-badge {
    position: static !important;
    margin: 14px auto 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-smart-badge.sw-hidden { display: none !important; }
#smart-wordbook-scope .sw-embedded-fc .sw-modal-close-x { display: none !important; }
#smart-wordbook-scope .sw-modal.sw-embedded-fc .sw-modal-content { text-align: center !important; }

/* Card stack */
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-container {
    display: block !important;
    perspective: none !important;
    /* Fixed (not min) height — the card itself is now a fixed-size box in
       both states, so the container's total height never changes and the
       action buttons below it never shift up/down when the card is flipped.
       372px total = the original 300px card (unchanged, see .sw-flashcard's
       explicit height below) + 72px of extra room so the thicker layer
       offsets can peek out underneath without clipping or growing the
       card itself. */
    height: 372px !important;
    margin: 18px 0 0 !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-fc-stack {
    /* border-box is required here — with the default content-box, height:
       100% (372px) plus padding-bottom: 72px would ADD to that, making the
       stack's real total height 444px instead of 372px. That mismatch was
       why the card kept rendering oversized and sliding past the bottom
       of the container instead of staying put at 300px. border-box makes
       the padding eat INTO the declared height, so the stack's content
       area (where the card sits) is truly 372 - 72 = 300px, exactly the
       original card size. */
    box-sizing: border-box !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    height: 100% !important;
    /* Reserves the peeking room for the layers below the card. Set to
       match layer-1's offset (72px) so the card's own bottom edge lines
       up flush with layer-1, and each layer beneath steps down by an
       equal 24px gap from there. */
    padding-bottom: 72px !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-fc-layer {
    display: block !important;
    position: absolute !important;
    /* Centered with left/right + margin auto (not left:50% + translateX)
       so each layer sits at a fixed, resting position that doesn't depend
       on a transform. That lets us pin it with transform: none !important
       below — a "money bundle" stack effect where only the top card
       (.sw-flashcard.sw-fc-exit) slides away and every layer underneath
       stays perfectly still, with zero risk of it inheriting or picking up
       any movement during the exit animation. */
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 100% !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    /* Pinned in place — no slide/shift of the background layers while the
       top card exits. Scoped to .sw-embedded-fc .sw-fc-layer only, so
       Exam Mode and any other non-embedded scope are untouched. */
    transform: none !important;
    /* 0.35s — cloned from Magoosh's .mv-vocab-card-stack.mv-revealed layer
       fade/scale timing. */
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}
/* Thick-stack offsets — deeper peek so the three layers underneath read
   as a noticeably thicker deck than the normal-stack values. */
/* Equal 24px gap between every layer, including the top card (whose
   bottom edge lines up with layer-1 via the stack's 72px padding-bottom
   above). A very light shadow on each — flat white with zero shadow is
   literally invisible against the page's white background, so this is
   the minimum needed to read as a card edge, not a decorative effect. */
#smart-wordbook-scope .sw-embedded-fc .sw-fc-layer-1 { bottom: 72px !important; height: calc(100% - 72px) !important; width: 100% !important; z-index: 5 !important; box-shadow: 0 1px 4px rgba(15,76,255,0.06) !important; }
#smart-wordbook-scope .sw-embedded-fc .sw-fc-layer-2 { bottom: 48px !important; height: calc(100% - 48px) !important; width: 94% !important; z-index: 4 !important; box-shadow: 0 1px 4px rgba(15,76,255,0.05) !important; }
#smart-wordbook-scope .sw-embedded-fc .sw-fc-layer-3 { bottom: 24px !important; height: calc(100% - 24px) !important; width: 88% !important; z-index: 3 !important; box-shadow: 0 1px 4px rgba(15,76,255,0.04) !important; }
/* 4th white card — needs a matching markup element in the template that
   renders the stack, e.g. <div class="sw-fc-layer sw-fc-layer-4"></div>,
   placed before .sw-fc-layer-3 in the DOM (lowest z-index / most-hidden
   layer comes first, same ordering as the existing three). */
#smart-wordbook-scope .sw-embedded-fc .sw-fc-layer-4 { bottom: 0 !important; height: 100% !important; width: 82% !important; z-index: 2 !important; box-shadow: 0 1px 4px rgba(15,76,255,0.03) !important; }
#smart-wordbook-scope .sw-embedded-fc .sw-fc-stack:has(#flashcard.flipped) .sw-fc-layer {
    opacity: 0 !important;
    /* scale only now — centering no longer relies on translateX, so the
       flip-state shrink uses the transform property alone (transform-origin
       stays centered by default) instead of stacking translate + scale. */
    transform: scale(0.92) !important;
    pointer-events: none !important;
}

#smart-wordbook-scope .sw-embedded-fc .sw-flashcard {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    /* Back to 100% of the stack's content box (300px, since the stack
       reserves 72px via padding-bottom above) instead of a hardcoded
       height — plus the 1% scale-down so the top card reads slightly
       smaller than the layers peeking out behind it. */
    height: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 24px rgba(15,76,255,0.12) !important;
    transform: scale(0.99) !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-inner {
    position: static !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    transform-style: flat !important;
    transition: none !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard.flipped .sw-flashcard-inner { transform: none !important; }

/* Card-swap ("next word") motion, embedded widget — the current card
   flicks up toward the top-right corner with a slight rotation and fades
   out (like flicking a physical card away, revealing the layered stack
   underneath); the next card's content is swapped in once it's off-screen
   and then simply fades into view. Mirrors the full-modal flashcard's
   animation (see the base .sw-flashcard rules above) — re-declared here,
   scoped to the embedded widget, so it isn't affected by any of the other
   embedded-only sizing/position overrides in this section. */
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard {
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1 !important;
    will-change: transform !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard.sw-fc-exit {
    transform: scale(0.99) translate(140%, -120%) rotate(22deg) !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard.sw-fc-no-transition {
    transition: none !important;
}
/* Ghost overlay — a detached clone of the outgoing card, stacked directly
   on top of the real #flashcard (which has already been updated to the
   next word underneath it). Only this overlay plays the exit flick, so
   the real card is always what's visible once the ghost clears — never a
   blank decorative layer. Positioned with top/left only; width and height
   are set inline from JS to match the real card's exact rendered size
   (bottom/right:0 would size against the containing block's padding box,
   which is taller than the real card by .sw-fc-stack's padding-bottom).
   Scoped to .sw-embedded-fc only; the ghost is never created outside the
   embedded widget. */
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard.sw-fc-ghost {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    z-index: 15 !important;
    pointer-events: none !important;
}

/* Word face — always visible, shrinks to a compact header when revealed */
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-front {
    position: relative !important;
    width: 100% !important;
    /* flex-basis: auto (from "flex: 1 1 auto") can't animate smoothly to/from
       a fixed px value — browsers just snap it, which is what caused the
       front to visibly jump instead of glide when hiding the meaning.
       Using flex-basis 0 + an explicit "height" (100% here, 72px when
       flipped below) transitions both ends as real interpolable lengths. */
    flex: 0 0 auto !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 36px 24px !important;
    border-radius: 20px !important;
    background: var(--djv-primary, #C41E3A) !important;
    backface-visibility: visible !important;
    transform: none !important;
    overflow: hidden !important;
    /* 0.45s — cloned from Magoosh's .mv-vocab-card-top-clean reveal timing. */
    transition: all 0.45s cubic-bezier(0.4,0,0.2,1) !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard.flipped .sw-flashcard-front {
    height: 72px !important;
    justify-content: center !important;
    padding: 8px 24px !important;
    border-radius: 20px 20px 0 0 !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-front p {
    font-size: 28px !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    transition: font-size 0.45s cubic-bezier(0.4,0,0.2,1) !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard.flipped .sw-flashcard-front p {
    font-size: 20px !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard.flipped .sw-fc-hint { display: none !important; }
#smart-wordbook-scope .sw-embedded-fc .sw-fc-hint { color: rgba(255,255,255,0.75) !important; margin-top: 12px !important; }
#smart-wordbook-scope .sw-embedded-fc .sw-fc-label { color: rgba(255,255,255,0.8) !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; }

#smart-wordbook-scope .sw-embedded-fc .sw-fc-speaker {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.22) !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.3s ease, border-color 0.3s ease !important;
}
/* Active/inactive highlight for the actual button in the markup
   (.sw-fc-speaker) — previously this rule only matched .sw-fc-mute,
   a class no element in the DOM ever carries, so the background never
   changed and the toggle looked like it was doing nothing. */
#smart-wordbook-scope .sw-embedded-fc .sw-fc-speaker.sw-fc-mute-active {
    background: rgba(0,0,0,0.28) !important;
    border-color: rgba(255,255,255,0.6) !important;
}

#smart-wordbook-scope .sw-embedded-fc .sw-fc-mute {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: 54px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.22) !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.3s ease, border-color 0.3s ease !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-fc-mute.sw-fc-mute-active {
    background: rgba(0,0,0,0.28) !important;
    border-color: rgba(255,255,255,0.6) !important;
}

#smart-wordbook-scope .sw-embedded-fc .sw-fc-bookmark {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: 14px !important;
    left: 14px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.22) !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.3s ease, border-color 0.3s ease !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-fc-bookmark.bookmarked {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

/* Meaning panel — expands under the word. Cloned from Magoosh's
   .mv-vocab-card-content-area: the show/hide mechanism itself is a
   max-height transition (0 -> capped value), not a flex-basis transition —
   matching that here, not just the timing, is what makes the reveal read
   the same as Magoosh's. The cap is calc(100% - 72px) instead of Magoosh's
   flat 300px because this card has a fixed 300px total height and the
   front header is a fixed 72px when flipped, so the back gets exactly
   whatever's left rather than a guessed constant. */
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-back {
    position: relative !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 24px !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-radius: 0 0 20px 20px !important;
    backface-visibility: visible !important;
    transform: none !important;
    /* 0.45s — cloned from Magoosh's .mv-vocab-card-content-area reveal
       timing, which animates max-height/opacity/padding together as a
       single "all" transition rather than staggering them. */
    transition: all 0.45s cubic-bezier(0.4,0,0.2,1) !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard.flipped .sw-flashcard-back {
    /* Grows up to whatever space is left in the fixed-height card — never
       grows the card itself, just scrolls internally if the meaning is
       long — same intent as Magoosh's fixed 300px cap, sized for this
       layout instead. */
    flex: 0 0 auto !important;
    max-height: calc(100% - 72px) !important;
    opacity: 1 !important;
    padding: 16px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-back .sw-fc-label { color: #888888 !important; }
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-back p {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    margin: 0 !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-fc-mnemonic {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    background: #F0F4FF !important;
    border: 1px solid #DCE5FF !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin-top: 16px !important;
    text-align: left !important;
    color: #1E3A8A !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-fc-mne-icon {
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    background: var(--djv-primary-dark, #2159E5) !important;
    color: #ffffff !important;
    font-size: 12px !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-fc-mne-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-fc-mne-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #6B86D6 !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-fc-mne-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #1E3A8A !important;
    word-break: break-word !important;
}

/* Action bar */
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 6px auto 0 !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-actions button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-flashcard-actions button:active { transform: scale(0.96) !important; }
#smart-wordbook-scope .sw-embedded-fc #fcUnknownBtn {
    background: #fff !important;
    border: 2.5px solid #e0e0e0 !important;
    color: #ccc !important;
}
#smart-wordbook-scope .sw-embedded-fc #fcUnknownBtn:hover {
      border-color: #333 !important;
      color: #333 !important;
  }
#smart-wordbook-scope .sw-embedded-fc .sw-btn-reveal {
    display: flex !important;
    flex: 0 0 76px !important;
    background: var(--djv-primary-pale, #BCCFFF) !important;
    color: var(--djv-primary-dark, #2159E5) !important;
    font-size: 16px !important;
}
#smart-wordbook-scope .sw-embedded-fc .sw-btn-reveal:hover {
    background: white !important;
    color: black !important;
}
#smart-wordbook-scope .sw-embedded-fc #fcKnownBtn {
    background: #2159e5 !important;
    color: #ffffff !important;
}
#smart-wordbook-scope .sw-embedded-fc #fcKnownBtn:hover {
    background: #1D4ED8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(29,78,216,0.30) !important;
}

@media (max-width: 420px) {
    #smart-wordbook-scope .sw-modal.sw-embedded-fc .sw-modal-content { padding: 14px 12px 16px !important; border-radius: 18px !important; }
    /* Same 72px of extra peek room as desktop, on top of the fixed 300px
       card set globally above — kept in sync so the card doesn't change
       size at this breakpoint either. */
    #smart-wordbook-scope .sw-embedded-fc .sw-flashcard-container { height: 372px !important; }
    #smart-wordbook-scope .sw-embedded-fc .sw-flashcard-front { padding: 24px 18px !important; }
    #smart-wordbook-scope .sw-embedded-fc .sw-flashcard.flipped .sw-flashcard-front { height: 64px !important; padding: 6px 18px !important; }
    #smart-wordbook-scope .sw-embedded-fc .sw-flashcard-back { padding: 0 18px !important; }
    #smart-wordbook-scope .sw-embedded-fc .sw-flashcard.flipped .sw-flashcard-back { padding: 12px 18px !important; max-height: calc(100% - 64px) !important; }
    #smart-wordbook-scope .sw-embedded-fc .sw-flashcard-front p { font-size: 24px !important; }
    #smart-wordbook-scope .sw-embedded-fc .sw-flashcard.flipped .sw-flashcard-front p { font-size: 18px !important; }
    #smart-wordbook-scope .sw-embedded-fc .sw-flashcard-back p { font-size: 16px !important; }
    #smart-wordbook-scope .sw-embedded-fc .sw-flashcard-actions button {font-size: 16px !important; }
    #smart-wordbook-scope .sw-embedded-fc .sw-btn-reveal { flex: 0 0 62px !important; }
}

#smart-wordbook-scope .sw-batch-score {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: 8px !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}
#smart-wordbook-scope .sw-batch-score.high { background: #dcfce7 !important; color: #15803d !important; }
#smart-wordbook-scope .sw-batch-score.mid  { background: #fef3c7 !important; color: #b45309 !important; }
#smart-wordbook-scope .sw-batch-score.low  { background: #fee2e2 !important; color: #b91c1c !important; }

/* =====================================================
   FIX: এমবেডেড (হেডারবিহীন) ইনস্ট্যান্স ভিউপোর্ট-প্রস্থে ছড়াবে না,
   নিজস্ব কোনো ব্যাকগ্রাউন্ড থাকবে না — শুধু ভোকাবুলারি কার্ড-স্ট্যাকের
   লেয়ারগুলো (.sw-fc-layer / .sw-flashcard front-back) নিজেদের রঙিন
   ব্যাকগ্রাউন্ড ধরে রাখবে, যাতে "ডেক" এফেক্ট ঠিকভাবে দেখা যায়।
   PHP থেকেই .sw-is-embedded ক্লাস বসানো হয়, তাই এখানে কোনো :has()
   রানটাইম ম্যাচিং লাগে না — zero-cost class selector। ===================================================== */
#smart-wordbook-scope.sw-is-embedded {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: 'Inter', 'Hind Siliguri', -apple-system, sans-serif !important;
    color: #1f2937 !important;
    line-height: 1.5 !important;
}
#smart-wordbook-scope.sw-is-embedded * {
    box-sizing: border-box !important;
}

#smart-wordbook-scope .sw-modal.sw-embedded-fc {
    background: transparent !important;
}
#smart-wordbook-scope .sw-modal.sw-embedded-fc .sw-modal-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* কার্ড-স্ট্যাকের আসল লেয়ারগুলো (deck effect) — এগুলো transparent হবে না,
   এগুলোই দৃশ্যমান "ভোকাবুলারি কার্ড স্তূপ" */
#smart-wordbook-scope .sw-embedded-fc .sw-fc-layer {
    background: #ffffff !important;
}

/* ── Meaning Test (অর্থ পরীক্ষা) namespaced styles ── */
/* Fonts inherit global plugin fonts — do not override font-family */
#smart-wordbook-scope .sw-meaning-test-page {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 12px 12px 24px !important;
  box-sizing: border-box !important;
  background: linear-gradient(165deg, #eef2ff 0%, #f8fafc 40%, #f1f5f9 100%) !important;
  z-index: 10050 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
#smart-wordbook-scope .sw-meaning-test-page.sw-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#smart-wordbook-scope .sw-meaning-test-page-inner {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 880px !important;
  margin: 0 auto 24px !important;
  min-height: auto !important;
}
#smart-wordbook-scope .sw-meaning-test-topbar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}
#smart-wordbook-scope .sw-meaning-test-back {
  border: 1px solid #c7d2fe !important;
  background: #fff !important;
  color: #312e81 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(49, 46, 129, 0.06) !important;
}
#smart-wordbook-scope .sw-meaning-test-back:hover { background: #eef2ff !important; }
#smart-wordbook-scope .sw-meaning-test-page-title {
  margin: 0 !important;
  font-size: 1.2rem !important;
  color: #1e1b4b !important;
  flex: 1 !important;
  font-weight: 800 !important;
}
#smart-wordbook-scope .sw-meaning-test-tabs {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 18px !important;
  background: #fff !important;
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}
#smart-wordbook-scope .sw-meaning-test-tab {
  border: none !important;
  background: transparent !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #64748b !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  flex: 1 !important;
  transition: all 0.2s ease !important;
}
#smart-wordbook-scope .sw-meaning-test-tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

/* Setup redesign */
#smart-wordbook-scope .sw-mt-setup-hero {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 22px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #312e81 0%, #1d4ed8 55%, #0ea5e9 100%) !important;
  color: #fff !important;
  margin-bottom: 18px !important;
  box-shadow: 0 12px 28px rgba(29, 78, 216, 0.28) !important;
}
#smart-wordbook-scope .sw-mt-setup-hero-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  flex-shrink: 0 !important;
}
#smart-wordbook-scope .sw-mt-setup-hero-title {
  margin: 0 0 4px !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #fff !important;
}
#smart-wordbook-scope .sw-mt-setup-hero-sub {
  margin: 0 !important;
  font-size: 13px !important;
  opacity: 0.9 !important;
  color: #e0e7ff !important;
}
#smart-wordbook-scope .sw-mt-setup-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
#smart-wordbook-scope .sw-mt-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 16px 16px 18px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;
  grid-column: 1 / -1 !important;
}
#smart-wordbook-scope .sw-mt-card-half {
  grid-column: span 1 !important;
}
#smart-wordbook-scope .sw-mt-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #0f172a !important;
  margin-bottom: 14px !important;
}
#smart-wordbook-scope .sw-mt-step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: #e0e7ff !important;
  color: #3730a3 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
#smart-wordbook-scope .sw-mt-card-actions { margin-left: auto !important; display: flex !important; gap: 8px !important; }
#smart-wordbook-scope .sw-mt-link-btn {
  border: none !important;
  background: #f1f5f9 !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
#smart-wordbook-scope .sw-mt-source-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
#smart-wordbook-scope .sw-mt-source-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  position: relative !important;
}
#smart-wordbook-scope .sw-mt-source-card input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
#smart-wordbook-scope .sw-mt-source-card:has(input:checked) {
  border-color: #4f46e5 !important;
  background: linear-gradient(180deg, #eef2ff, #fff) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2) !important;
}
#smart-wordbook-scope .sw-mt-source-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: #e0e7ff !important;
  color: #4338ca !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}
#smart-wordbook-scope .sw-mt-source-text { display: flex !important; flex-direction: column !important; gap: 2px !important; }
#smart-wordbook-scope .sw-mt-source-text strong { font-size: 13px !important; color: #0f172a !important; }
#smart-wordbook-scope .sw-mt-source-text small { font-size: 11px !important; color: #64748b !important; font-weight: 500 !important; }

#smart-wordbook-scope .sw-meaning-test-cats { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; max-height: 150px !important; overflow-y: auto !important; }
#smart-wordbook-scope .sw-meaning-test-cat-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  font-size: 12px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  color: #475569 !important;
}
#smart-wordbook-scope .sw-meaning-test-cat-chip.active {
  border-color: #4f46e5 !important;
  background: #eef2ff !important;
  color: #3730a3 !important;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15) !important;
}
#smart-wordbook-scope .sw-meaning-test-cat-chip input { margin: 0 !important; }

#smart-wordbook-scope .sw-meaning-test-sel-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  margin-left: auto !important;
}
#smart-wordbook-scope .sw-meaning-test-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 10px !important; }
#smart-wordbook-scope .sw-meaning-test-chip {
  border: 2px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  min-width: 52px !important;
  transition: all 0.15s ease !important;
}
#smart-wordbook-scope .sw-meaning-test-chip:hover {
  border-color: #6366f1 !important;
  background: #eef2ff !important;
}
#smart-wordbook-scope .sw-meaning-test-chip.active {
  background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
  transform: translateY(-1px) !important;
}
#smart-wordbook-scope .sw-meaning-test-input {
  width: 100% !important;
  max-width: 180px !important;
  padding: 10px 12px !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  background: #fff !important;
}
#smart-wordbook-scope .sw-meaning-test-input:focus {
  border-color: #6366f1 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
#smart-wordbook-scope .sw-meaning-test-hint { font-size: 13px !important; color: #64748b !important; margin: 12px 0 !important; }
#smart-wordbook-scope .sw-mt-setup-cta,
#smart-wordbook-scope .sw-mt-exam-bottom {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
  padding-top: 4px !important;
}
#smart-wordbook-scope .sw-mt-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 22px !important;
  border: none !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.3) !important;
}
#smart-wordbook-scope .sw-mt-btn-primary:hover { filter: brightness(1.05) !important; }
#smart-wordbook-scope .sw-mt-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 18px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

/* Exam scroll-all */
#smart-wordbook-scope .sw-mt-exam-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(15,23,42,0.06) !important;
}
#smart-wordbook-scope .sw-mt-exam-sticky-left { flex: 1 !important; min-width: 0 !important; }
#smart-wordbook-scope .sw-mt-answered-label { font-weight: 800 !important; font-size: 13px !important; color: #1e293b !important; display: block !important; margin-bottom: 6px !important; }
#smart-wordbook-scope .sw-meaning-test-timer {
  font-weight: 800 !important;
  color: #b91c1c !important;
  font-size: 14px !important;
  background: #fef2f2 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1px solid #fecaca !important;
  white-space: nowrap !important;
}
#smart-wordbook-scope .sw-mt-questions-scroll {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding-bottom: 8px !important;
}
#smart-wordbook-scope .sw-mt-q-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 16px 16px 18px !important;
  box-shadow: 0 4px 14px rgba(15,23,42,0.04) !important;
}
#smart-wordbook-scope .sw-mt-q-num {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #4f46e5 !important;
  background: #eef2ff !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  margin-bottom: 10px !important;
}
#smart-wordbook-scope .sw-mt-q-text {
  margin: 0 0 12px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
#smart-wordbook-scope .sw-quiz-opt.sw-meaning-test-selected {
  border-color: #4f46e5 !important;
  background: #eef2ff !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22) !important;
}

/* History */
#smart-wordbook-scope .sw-meaning-test-history-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#smart-wordbook-scope .sw-meaning-test-archive-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  flex-wrap: wrap !important;
  box-shadow: 0 2px 10px rgba(15,23,42,0.03) !important;
}
#smart-wordbook-scope .sw-meaning-test-hist-good { border-left: 4px solid #16a34a !important; }
#smart-wordbook-scope .sw-meaning-test-hist-mid { border-left: 4px solid #f59e0b !important; }
#smart-wordbook-scope .sw-meaning-test-hist-low { border-left: 4px solid #dc2626 !important; }
#smart-wordbook-scope .sw-meaning-test-arch-info { display: flex !important; flex-direction: column !important; gap: 4px !important; font-size: 13px !important; color: #475569 !important; }
#smart-wordbook-scope .sw-meaning-test-arch-info strong { color: #0f172a !important; font-size: 14px !important; }
#smart-wordbook-scope .sw-meaning-test-analysis-btn {
  background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
#smart-wordbook-scope .sw-meaning-test-back-sm {
  border: none !important;
  background: transparent !important;
  color: #4f46e5 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
  padding: 4px 0 !important;
  font-size: 13px !important;
}
#smart-wordbook-scope .sw-meaning-test-analysis-title {
  margin: 18px 0 10px !important;
  font-size: 15px !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Filters */
#smart-wordbook-scope .sw-mt-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
#smart-wordbook-scope .sw-mt-filter {
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  color: #475569 !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  cursor: pointer !important;
}
#smart-wordbook-scope .sw-mt-filter.active {
  background: #0f172a !important;
  color: #fff !important;
  border-color: #0f172a !important;
}

/* Review with 4 options */
#smart-wordbook-scope .sw-meaning-test-review-list {
  max-height: none !important;
  overflow: visible !important;
  padding: 4px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#smart-wordbook-scope .sw-meaning-test-rev-item {
  padding: 14px 14px 16px !important;
  border-radius: 14px !important;
  border: 2px solid #e2e8f0 !important;
  font-size: 13px !important;
  background: #fff !important;
}
#smart-wordbook-scope .sw-meaning-test-rev-ok { border-color: #86efac !important; background: #f0fdf4 !important; }
#smart-wordbook-scope .sw-meaning-test-rev-bad { border-color: #fca5a5 !important; background: #fef2f2 !important; }
#smart-wordbook-scope .sw-meaning-test-rev-skip { border-color: #cbd5e1 !important; background: #f8fafc !important; }
#smart-wordbook-scope .sw-meaning-test-rev-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
#smart-wordbook-scope .sw-meaning-test-rev-badge {
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}
#smart-wordbook-scope .sw-meaning-test-rev-ok .sw-meaning-test-rev-badge { background: #16a34a !important; color: #fff !important; }
#smart-wordbook-scope .sw-meaning-test-rev-bad .sw-meaning-test-rev-badge { background: #dc2626 !important; color: #fff !important; }
#smart-wordbook-scope .sw-meaning-test-rev-skip .sw-meaning-test-rev-badge { background: #64748b !important; color: #fff !important; }
#smart-wordbook-scope .sw-mt-rev-opts { display: flex !important; flex-direction: column !important; gap: 6px !important; }
#smart-wordbook-scope .sw-mt-rev-opt {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  flex-wrap: wrap !important;
}
#smart-wordbook-scope .sw-mt-rev-letter {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}
#smart-wordbook-scope .sw-mt-rev-opt-text { flex: 1 !important; font-weight: 600 !important; color: #1e293b !important; }
#smart-wordbook-scope .sw-mt-rev-opt-correct {
  border-color: #86efac !important;
  background: #dcfce7 !important;
}
#smart-wordbook-scope .sw-mt-rev-opt-correct .sw-mt-rev-letter { background: #16a34a !important; color: #fff !important; }
#smart-wordbook-scope .sw-mt-rev-opt-user-wrong {
  border-color: #fca5a5 !important;
  background: #fee2e2 !important;
}
#smart-wordbook-scope .sw-mt-rev-opt-user-wrong .sw-mt-rev-letter { background: #dc2626 !important; color: #fff !important; }
#smart-wordbook-scope .sw-mt-rev-opt-user-ok {
  border-color: #86efac !important;
  background: #dcfce7 !important;
}
#smart-wordbook-scope .sw-mt-rev-tag {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  margin-left: auto !important;
}
#smart-wordbook-scope .sw-mt-rev-tag.ok { background: #16a34a !important; color: #fff !important; }
#smart-wordbook-scope .sw-mt-rev-tag.bad { background: #dc2626 !important; color: #fff !important; }
#smart-wordbook-scope .sw-meaning-test-rev-cat { font-size: 11px !important; color: #94a3b8 !important; margin-top: 8px !important; }

#smart-wordbook-scope .sw-mt-result-banner {
  text-align: center !important;
  padding: 18px 12px 8px !important;
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  margin-bottom: 14px !important;
}
#smart-wordbook-scope .sw-mt-result-emoji { font-size: 2rem !important; margin-bottom: 6px !important; }
#smart-wordbook-scope .sw-mt-result-stats { margin-bottom: 8px !important; }

@media (max-width: 720px) {
  #smart-wordbook-scope .sw-mt-setup-grid { grid-template-columns: 1fr !important; }
  #smart-wordbook-scope .sw-mt-card-half { grid-column: 1 / -1 !important; }
  #smart-wordbook-scope .sw-mt-source-grid { grid-template-columns: 1fr !important; }
  #smart-wordbook-scope .sw-meaning-test-page { padding: 8px 8px 20px !important; }
}



/* =====================================================
   PREMIUM LOCK on exam mode cards (learning modes panel)
   ===================================================== */
#smart-wordbook-scope .sw-mode-card.sw-premium-locked {
    position: relative !important;
    opacity: 0.92 !important;
    cursor: pointer !important;
}
#smart-wordbook-scope .sw-mode-card.sw-premium-locked::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(248,250,252,0.55) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
#smart-wordbook-scope .sw-premium-lock-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 99px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #92400e !important;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: 1px solid #fbbf24 !important;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.35) !important;
    pointer-events: none !important;
}
#smart-wordbook-scope .sw-premium-lock-badge i {
    font-size: 11px !important;
}

/* Hero refinements */
#smart-wordbook-scope .sw-hero-glass-card {
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
    box-shadow:
        0 4px 24px rgba(15, 76, 255, 0.08),
        0 1px 3px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
#smart-wordbook-scope .sw-stats-grid {
    gap: 12px !important;
}
#smart-wordbook-scope .sw-stat-card {
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    box-shadow: 0 2px 10px rgba(15, 76, 255, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
#smart-wordbook-scope .sw-header-actions button {
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#smart-wordbook-scope .sw-header-actions button:hover {
    transform: translateY(-1px) !important;
}
#smart-wordbook-scope .sw-hero-search-box {
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(15, 76, 255, 0.10) !important;
}
#smart-wordbook-scope .sw-modes-grid {
    gap: 12px !important;
}
#smart-wordbook-scope .sw-mode-card {
    border-radius: 16px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#smart-wordbook-scope .sw-mode-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10) !important;
}

/* Embedded widget: extra containment so theme columns never break */
#smart-wordbook-scope.sw-is-embedded {
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}
body:has(#smart-wordbook-scope.sw-is-embedded):not(:has(#smart-wordbook-scope:not(.sw-is-embedded))) #content.site-content > .container {
    padding-left: revert !important;
    padding-right: revert !important;
    max-width: revert !important;
}


/* =====================================================
   V2 REDESIGN — Hero + List (overrides older hero styles)
   Clean, modern dictionary UI — not the old busy blue blob look
   ===================================================== */

/* Page background */
#smart-wordbook-scope:not(.sw-is-embedded) {
    background: #f4f6fb !important;
    background-color: #f4f6fb !important;
}

/* ---- HERO V2 ---- */
#smart-wordbook-scope .sw-header.sw-header-v2 {
    position: relative !important;
    overflow: visible !important;
    padding: 28px 16px 8px !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
}
#smart-wordbook-scope .sw-header.sw-header-v2::before {
    display: none !important;
}
#smart-wordbook-scope .sw-header.sw-header-v2 .sw-header-blob {
    display: none !important;
}

#smart-wordbook-scope .sw-header-inner {
    position: relative !important;
    z-index: 2 !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 28px 24px 24px !important;
    border-radius: 24px !important;
    background:
        linear-gradient(145deg, #0b1220 0%, #152238 48%, #1a2d4a 100%) !important;
    box-shadow:
        0 20px 50px rgba(11, 18, 32, 0.28),
        0 2px 0 rgba(255,255,255,0.06) inset !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

#smart-wordbook-scope .sw-hero-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-bottom: 22px !important;
}

#smart-wordbook-scope .sw-header-v2 .sw-brand-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

#smart-wordbook-scope .sw-header-v2 .sw-brand-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-brand-icon i {
    font-size: 22px !important;
    color: #fff !important;
}

#smart-wordbook-scope .sw-eyebrow {
    margin: 0 0 4px 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #93c5fd !important;
}

#smart-wordbook-scope .sw-header-v2 .sw-main-title {
    margin: 0 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: border-box !important;
}

#smart-wordbook-scope .sw-header-v2 .sw-sub-title {
    margin: 6px 0 0 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
}

#smart-wordbook-scope .sw-header-v2 .sw-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

#smart-wordbook-scope .sw-header-v2 .sw-header-actions button,
#smart-wordbook-scope .sw-header-v2 .sw-btn-primary,
#smart-wordbook-scope .sw-header-v2 .sw-btn-ghost {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease !important;
    line-height: 1.2 !important;
}

#smart-wordbook-scope .sw-header-v2 .sw-btn-primary,
#smart-wordbook-scope .sw-header-v2 #learningModesBtn {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-btn-primary:hover,
#smart-wordbook-scope .sw-header-v2 #learningModesBtn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.06) !important;
}

#smart-wordbook-scope .sw-header-v2 .sw-btn-ghost,
#smart-wordbook-scope .sw-header-v2 #bookmarkFilterBtn,
#smart-wordbook-scope .sw-header-v2 #scoreHistoryBtn,
#smart-wordbook-scope .sw-header-v2 #adminBtn {
    background: rgba(255,255,255,0.06) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.12) !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-btn-ghost:hover,
#smart-wordbook-scope .sw-header-v2 #bookmarkFilterBtn:hover,
#smart-wordbook-scope .sw-header-v2 #scoreHistoryBtn:hover,
#smart-wordbook-scope .sw-header-v2 #adminBtn:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
#smart-wordbook-scope .sw-header-v2 #bookmarkFilterBtn.active {
    background: rgba(251, 191, 36, 0.18) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    color: #fbbf24 !important;
}

/* Search inside dark hero */
#smart-wordbook-scope .sw-header-v2 .sw-hero-search-wrapper {
    margin: 0 0 18px 0 !important;
    max-width: none !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-hero-search-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 4px 6px 4px 16px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-hero-search-box:focus-within {
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.25), 0 0 0 3px rgba(59, 130, 246, 0.35) !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-hero-search-icon {
    color: #64748b !important;
    font-size: 15px !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-hero-search-box input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    padding: 12px 4px !important;
    min-width: 0 !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-hero-search-box input::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-hero-clear-btn {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    font-size: 16px !important;
}

/* Stats as frosted chips on dark hero */
#smart-wordbook-scope .sw-header-v2 .sw-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    max-width: none !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-stat-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    min-width: 0 !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-stat-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-icon-blue { background: rgba(59,130,246,0.25) !important; color: #93c5fd !important; }
#smart-wordbook-scope .sw-header-v2 .sw-icon-teal { background: rgba(45,212,191,0.2) !important; color: #5eead4 !important; }
#smart-wordbook-scope .sw-header-v2 .sw-icon-amber { background: rgba(251,191,36,0.2) !important; color: #fcd34d !important; }
#smart-wordbook-scope .sw-header-v2 .sw-icon-purple { background: rgba(167,139,250,0.22) !important; color: #c4b5fd !important; }

#smart-wordbook-scope .sw-header-v2 .sw-stat-num {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-stat-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-category-select {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    max-width: 100% !important;
}
#smart-wordbook-scope .sw-header-v2 .sw-category-select option {
    color: #0f172a !important;
    background: #fff !important;
}

@media (max-width: 768px) {
    #smart-wordbook-scope .sw-header.sw-header-v2 {
        padding: 16px 12px 4px !important;
    }
    #smart-wordbook-scope .sw-header-inner {
        padding: 20px 16px 16px !important;
        border-radius: 20px !important;
    }
    #smart-wordbook-scope .sw-header-v2 .sw-main-title {
        font-size: 22px !important;
    }
    #smart-wordbook-scope .sw-header-v2 .sw-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #smart-wordbook-scope .sw-header-v2 .sw-header-actions button span {
        /* keep labels on mobile for clarity */
    }
}

/* ---- TOOLBAR ---- */
#smart-wordbook-scope .sw-search-toolbar {
    max-width: 960px !important;
    margin: 16px auto 12px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e8eef5 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: none !important;
}

/* ---- WORD LIST V2 ---- */
#smart-wordbook-scope .sw-list-space {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 960px !important;
    margin: 0 auto 32px !important;
    padding: 4px 16px 40px !important;
}

#smart-wordbook-scope .sw-word-card {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #e8eef5 !important;
    border-left: 4px solid #2563eb !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}
#smart-wordbook-scope .sw-word-card:hover {
    border-color: #d0dcf0 !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    transform: translateY(-2px) !important;
}

#smart-wordbook-scope .sw-card-header {
    padding: 18px 18px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
}

#smart-wordbook-scope .sw-word-trigger {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    cursor: pointer !important;
    flex: 1 !important;
    min-width: 0 !important;
}

#smart-wordbook-scope .sw-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#smart-wordbook-scope .sw-word-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
}

#smart-wordbook-scope .sw-pos-tag {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    text-transform: lowercase !important;
}

#smart-wordbook-scope .sw-btn-speaker {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    color: #2563eb !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 12px !important;
    padding: 0 !important;
    transition: background 0.15s ease !important;
}
#smart-wordbook-scope .sw-btn-speaker:hover {
    background: #dbeafe !important;
}

#smart-wordbook-scope .sw-meaning-row {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #1e40af !important;
    display: block !important;
    line-height: 1.45 !important;
}
#smart-wordbook-scope .sw-meaning-row i {
    display: none !important;
}

#smart-wordbook-scope .sw-action-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

#smart-wordbook-scope .sw-btn-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}
#smart-wordbook-scope .sw-btn-icon:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}
#smart-wordbook-scope .sw-btn-icon.bookmarked {
    color: #d97706 !important;
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

/* Mnemonic strip */
#smart-wordbook-scope .sw-card-mnemonic {
    margin: 0 14px 14px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1px solid #fde68a !important;
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
}
#smart-wordbook-scope .sw-mnemonic-content {
    font-size: 13.5px !important;
    color: #78350f !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* Accordion content */
#smart-wordbook-scope .accordion-content {
    padding: 0 14px 14px !important;
}
#smart-wordbook-scope .sw-accordion-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 10px !important;
}
#smart-wordbook-scope .sw-accordion-subcard {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

/* Batch groups tighter with list */
#smart-wordbook-scope .sw-batch-group {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =====================================================
   V3 — LIGHT premium UI (hero + 2-col list + modes sheet)
   Senior designer pass — clean, airy, multi-column
   ===================================================== */

#smart-wordbook-scope:not(.sw-is-embedded) {
    background: #f7f8fc !important;
    background-color: #f7f8fc !important;
}

/* ---- LIGHT HERO V3 ---- */
#smart-wordbook-scope .sw-header.sw-header-v3 {
    position: relative !important;
    overflow: visible !important;
    padding: 24px 16px 4px !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
}
#smart-wordbook-scope .sw-header.sw-header-v3::before,
#smart-wordbook-scope .sw-header.sw-header-v3 .sw-header-blob {
    display: none !important;
}

#smart-wordbook-scope .sw-header-v3 .sw-header-inner {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 28px 28px 24px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(900px 280px at 0% 0%, rgba(59,130,246,0.10), transparent 55%),
        radial-gradient(700px 260px at 100% 0%, rgba(99,102,241,0.08), transparent 50%),
        #ffffff !important;
    border: 1px solid #e8eef7 !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 12px 40px rgba(37, 99, 235, 0.06) !important;
}

#smart-wordbook-scope .sw-header-v3 .sw-hero-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
}

#smart-wordbook-scope .sw-header-v3 .sw-brand-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28) !important;
    color: #fff !important;
}
#smart-wordbook-scope .sw-header-v3 .sw-brand-icon i { color: #fff !important; font-size: 22px !important; }

#smart-wordbook-scope .sw-header-v3 .sw-eyebrow {
    margin: 0 0 2px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #3b82f6 !important;
}

#smart-wordbook-scope .sw-header-v3 .sw-main-title {
    margin: 0 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #0f172a !important;
    background: none !important;
    -webkit-text-fill-color: #0f172a !important;
    line-height: 1.2 !important;
}

#smart-wordbook-scope .sw-header-v3 .sw-sub-title {
    margin: 4px 0 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
}

#smart-wordbook-scope .sw-header-v3 .sw-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#smart-wordbook-scope .sw-header-v3 .sw-header-actions button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    transition: all 0.18s ease !important;
    line-height: 1.2 !important;
}

#smart-wordbook-scope .sw-header-v3 #learningModesBtn,
#smart-wordbook-scope .sw-header-v3 .sw-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28) !important;
}
#smart-wordbook-scope .sw-header-v3 #learningModesBtn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
}

#smart-wordbook-scope .sw-header-v3 #bookmarkFilterBtn,
#smart-wordbook-scope .sw-header-v3 #scoreHistoryBtn,
#smart-wordbook-scope .sw-header-v3 #adminBtn,
#smart-wordbook-scope .sw-header-v3 .sw-btn-ghost {
    background: #f8fafc !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}
#smart-wordbook-scope .sw-header-v3 #bookmarkFilterBtn:hover,
#smart-wordbook-scope .sw-header-v3 #scoreHistoryBtn:hover,
#smart-wordbook-scope .sw-header-v3 #adminBtn:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}
#smart-wordbook-scope .sw-header-v3 #bookmarkFilterBtn.active {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#smart-wordbook-scope .sw-header-v3 .sw-hero-search-wrapper {
    margin: 0 0 18px !important;
}
#smart-wordbook-scope .sw-header-v3 .sw-hero-search-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 4px 6px 4px 16px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
#smart-wordbook-scope .sw-header-v3 .sw-hero-search-box:focus-within {
    background: #fff !important;
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
}
#smart-wordbook-scope .sw-header-v3 .sw-hero-search-icon { color: #94a3b8 !important; }
#smart-wordbook-scope .sw-header-v3 .sw-hero-search-box input {
    flex: 1 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    padding: 12px 4px !important;
    min-width: 0 !important;
}
#smart-wordbook-scope .sw-header-v3 .sw-hero-search-box input::placeholder { color: #94a3b8 !important; }
#smart-wordbook-scope .sw-header-v3 .sw-hero-clear-btn {
    background: transparent !important;
    border: 0 !important;
    color: #94a3b8 !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
}

#smart-wordbook-scope .sw-header-v3 .sw-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}
#smart-wordbook-scope .sw-header-v3 .sw-stat-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 14px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1px solid #eef2f7 !important;
    box-shadow: none !important;
    min-width: 0 !important;
}
#smart-wordbook-scope .sw-header-v3 .sw-stat-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
}
#smart-wordbook-scope .sw-header-v3 .sw-icon-blue { background: #dbeafe !important; color: #2563eb !important; }
#smart-wordbook-scope .sw-header-v3 .sw-icon-teal { background: #ccfbf1 !important; color: #0d9488 !important; }
#smart-wordbook-scope .sw-header-v3 .sw-icon-amber { background: #fef3c7 !important; color: #d97706 !important; }
#smart-wordbook-scope .sw-header-v3 .sw-icon-purple { background: #ede9fe !important; color: #7c3aed !important; }

#smart-wordbook-scope .sw-header-v3 .sw-stat-num {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.15 !important;
}
#smart-wordbook-scope .sw-header-v3 .sw-stat-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-top: 2px !important;
}
#smart-wordbook-scope .sw-header-v3 .sw-category-select {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    #smart-wordbook-scope .sw-header-v3 .sw-header-inner { padding: 20px 16px 16px !important; border-radius: 18px !important; }
    #smart-wordbook-scope .sw-header-v3 .sw-main-title { font-size: 22px !important; }
    #smart-wordbook-scope .sw-header-v3 .sw-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
}

/* ---- TOOLBAR + 2-COLUMN WORD GRID ---- */
#smart-wordbook-scope .sw-search-toolbar {
    max-width: 1100px !important;
    margin: 16px auto 12px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e8eef5 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03) !important;
}

#smart-wordbook-scope .sw-list-space {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    max-width: 1100px !important;
    margin: 0 auto 40px !important;
    padding: 4px 16px 48px !important;
}
@media (max-width: 720px) {
    #smart-wordbook-scope .sw-list-space {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

#smart-wordbook-scope .sw-word-card {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #e8eef5 !important;
    border-left: 4px solid #3b82f6 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
    height: 100% !important;
}
#smart-wordbook-scope .sw-word-card:hover {
    border-color: #dbe7f8 !important;
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08) !important;
    transform: translateY(-2px) !important;
}
#smart-wordbook-scope .sw-card-header {
    padding: 16px 16px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
#smart-wordbook-scope .sw-word-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
}
#smart-wordbook-scope .sw-meaning-row {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #1d4ed8 !important;
}
#smart-wordbook-scope .sw-btn-speaker {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    color: #2563eb !important;
}

/* Batch groups full width in grid context */
#smart-wordbook-scope .sw-batch-group {
    grid-column: 1 / -1 !important;
    max-width: none !important;
}

/* =====================================================
   LEARNING MODES SHEET — redesigned cards
   ===================================================== */
#smart-wordbook-scope .sw-learning-modes-panel .sw-modes-sheet {
    max-width: 860px !important;
    width: min(860px, 94vw) !important;
    padding: 0 !important;
    border-radius: 22px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: min(88vh, 900px) !important;
    border: 1px solid #e8eef5 !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
    background: #ffffff !important;
}

#smart-wordbook-scope .sw-modes-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 22px 24px 16px !important;
    background:
        radial-gradient(600px 160px at 0% 0%, rgba(59,130,246,0.08), transparent 60%),
        #fbfcff !important;
    border-bottom: 1px solid #eef2f7 !important;
    margin: 0 !important;
}
#smart-wordbook-scope .sw-modes-kicker {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #3b82f6 !important;
    margin-bottom: 4px !important;
}
#smart-wordbook-scope .sw-modes-header h3 {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: block !important;
}
#smart-wordbook-scope .sw-modes-header h3 i { display: none !important; }
#smart-wordbook-scope .sw-modes-sub {
    margin: 6px 0 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}
#smart-wordbook-scope .sw-modes-header .sw-modal-close-x {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

#smart-wordbook-scope .sw-modes-section-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px 24px 8px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}
#smart-wordbook-scope .sw-modes-section-challenge { color: #b45309 !important; }

#smart-wordbook-scope .sw-modes-grid,
#smart-wordbook-scope .sw-modes-grid-4,
#smart-wordbook-scope .sw-modes-grid-exam {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 4px 20px 20px !important;
    margin: 0 !important;
}
@media (max-width: 560px) {
    #smart-wordbook-scope .sw-modes-grid,
    #smart-wordbook-scope .sw-modes-grid-4,
    #smart-wordbook-scope .sw-modes-grid-exam {
        grid-template-columns: 1fr !important;
        padding: 4px 14px 16px !important;
    }
}

#smart-wordbook-scope .sw-mode-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    padding: 14px 14px !important;
    border-radius: 16px !important;
    border: 1px solid #e8eef5 !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03) !important;
    overflow: hidden !important;
}
#smart-wordbook-scope .sw-mode-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}
#smart-wordbook-scope .sw-mode-card h4 {
    margin: 0 0 3px !important;
    font-size: 14.5px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
}
#smart-wordbook-scope .sw-mode-card p {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.35 !important;
}
#smart-wordbook-scope .sw-mode-body {
    flex: 1 !important;
    min-width: 0 !important;
}
#smart-wordbook-scope .sw-mode-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 18px !important;
    color: #fff !important;
}
#smart-wordbook-scope .sw-mode-go {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15,23,42,0.04) !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}
#smart-wordbook-scope .sw-mode-card:hover .sw-mode-go {
    background: rgba(37,99,235,0.1) !important;
    color: #2563eb !important;
}

/* Color variants */
#smart-wordbook-scope .sw-mode-teal {
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 55%) !important;
    border-color: #99f6e4 !important;
}
#smart-wordbook-scope .sw-mode-teal .sw-mode-icon { background: linear-gradient(135deg, #14b8a6, #0d9488) !important; }

#smart-wordbook-scope .sw-mode-sky {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 55%) !important;
    border-color: #bae6fd !important;
}
#smart-wordbook-scope .sw-mode-sky .sw-mode-icon { background: linear-gradient(135deg, #0ea5e9, #0284c7) !important; }

#smart-wordbook-scope .sw-mode-indigo {
    background: linear-gradient(135deg, #eef2ff 0%, #ffffff 55%) !important;
    border-color: #c7d2fe !important;
}
#smart-wordbook-scope .sw-mode-indigo .sw-mode-icon { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; }

#smart-wordbook-scope .sw-mode-rose {
    background: linear-gradient(135deg, #fff1f2 0%, #ffffff 55%) !important;
    border-color: #fecdd3 !important;
}
#smart-wordbook-scope .sw-mode-rose .sw-mode-icon { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; }

#smart-wordbook-scope .sw-mode-orange {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 55%) !important;
    border-color: #fed7aa !important;
}
#smart-wordbook-scope .sw-mode-orange .sw-mode-icon { background: linear-gradient(135deg, #f97316, #ea580c) !important; }

#smart-wordbook-scope .sw-mode-amber {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 55%) !important;
    border-color: #fde68a !important;
}
#smart-wordbook-scope .sw-mode-amber .sw-mode-icon { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }

#smart-wordbook-scope .sw-mode-blue {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 55%) !important;
    border-color: #bfdbfe !important;
}
#smart-wordbook-scope .sw-mode-blue .sw-mode-icon { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; }

#smart-wordbook-scope .sw-mode-green {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 55%) !important;
    border-color: #bbf7d0 !important;
}
#smart-wordbook-scope .sw-mode-green .sw-mode-icon { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }

#smart-wordbook-scope .sw-mode-violet {
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 55%) !important;
    border-color: #ddd6fe !important;
}
#smart-wordbook-scope .sw-mode-violet .sw-mode-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; }

/* Premium lock overlay on mode cards */
#smart-wordbook-scope .sw-mode-card.sw-premium-locked {
    opacity: 1 !important;
}
#smart-wordbook-scope .sw-mode-card.sw-premium-locked::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(248,250,252,0.45)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
#smart-wordbook-scope .sw-premium-lock-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 99px !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    color: #92400e !important;
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    border: 1px solid #fbbf24 !important;
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.3) !important;
    pointer-events: none !important;
}


/* =====================================================
   V3.1 FIXES — full-width content + scrollable modes + batch UI
   ===================================================== */

/* Content column: use more of the viewport */
#smart-wordbook-scope .sw-header-v3 .sw-header-inner,
#smart-wordbook-scope .sw-search-toolbar,
#smart-wordbook-scope .sw-list-space {
    max-width: 1280px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#smart-wordbook-scope .sw-list-space {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

@media (max-width: 800px) {
    #smart-wordbook-scope .sw-list-space {
        grid-template-columns: 1fr !important;
    }
}

/* Batch group = full row of the grid, full width bar */
#smart-wordbook-scope .sw-batch-group {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 4px 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e5eaf3 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
}

#smart-wordbook-scope .sw-batch-group-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fc 100%) !important;
    border-bottom: 1px solid transparent !important;
    cursor: pointer !important;
    border-radius: 0 !important;
}

#smart-wordbook-scope .sw-batch-group:has(.sw-batch-words-wrapper.open) .sw-batch-group-header {
    border-bottom-color: #e8eef5 !important;
}

#smart-wordbook-scope .sw-batch-group-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

#smart-wordbook-scope .sw-batch-index {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25) !important;
}

#smart-wordbook-scope .sw-batch-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

#smart-wordbook-scope .sw-batch-label {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

#smart-wordbook-scope .sw-batch-range {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

#smart-wordbook-scope .sw-batch-group-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

#smart-wordbook-scope .sw-batch-exam-btn {
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25) !important;
    cursor: pointer !important;
}

#smart-wordbook-scope .sw-batch-toggle-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-width: 38px !important;
}

#smart-wordbook-scope .sw-batch-words-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 14px !important;
}
@media (max-width: 800px) {
    #smart-wordbook-scope .sw-batch-words-inner {
        grid-template-columns: 1fr !important;
    }
    #smart-wordbook-scope .sw-batch-exam-btn span {
        display: none !important;
    }
}

/* ---- LEARNING MODES: scrollable popup ---- */
#smart-wordbook-scope .sw-learning-modes-panel {
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

#smart-wordbook-scope .sw-learning-modes-panel .sw-modal-content,
#smart-wordbook-scope .sw-learning-modes-panel .sw-modes-sheet {
    max-width: min(920px, 96vw) !important;
    width: min(920px, 96vw) !important;
    max-height: min(88vh, 900px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: auto !important;
    display: block !important;
}

/* sticky header inside modes sheet while body scrolls */
#smart-wordbook-scope .sw-learning-modes-panel .sw-modes-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
}

/* kill old modal-large 600px limit for modes */
#smart-wordbook-scope .sw-learning-modes-panel .sw-modal-large {
    max-width: min(920px, 96vw) !important;
}

/* Toolbar full width match */
#smart-wordbook-scope .sw-search-toolbar {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}


/* =====================================================
   SMART WORDBOOK — PREMIUM REDESIGN 2.0
   "Quiet Luxury Notebook" · Modern educational UI
   Refined ledger palette + soft depth + perfect hierarchy
   All existing classes & behaviour preserved.
   ===================================================== */

/* ─── Expanded Design Tokens ─────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) {
    /* Core surfaces */
    --sw-ledger-paper:       #F6F8F5;
    --sw-ledger-sheet:       #FFFFFF;
    --sw-ledger-sheet-elev:  #FFFFFF;
    --sw-ledger-ink:         #142E26;
    --sw-ledger-ink-soft:    #1E4036;
    --sw-ledger-emerald:     #1F6B52;
    --sw-ledger-emerald-mid: #2A8A6A;
    --sw-ledger-emerald-soft:#E6F2EC;
    --sw-ledger-emerald-pale:#F0F7F3;
    --sw-ledger-brass:       #C4922E;
    --sw-ledger-brass-soft:  #FBF3E0;
    --sw-ledger-rule:        rgba(20, 46, 38, 0.10);
    --sw-ledger-rule-strong: rgba(20, 46, 38, 0.16);
    --sw-ledger-muted:       rgba(20, 46, 38, 0.55);
    --sw-ledger-muted-2:     rgba(20, 46, 38, 0.38);

    /* Elevation system */
    --sw-shadow-xs:  0 1px 2px rgba(20, 46, 38, 0.04);
    --sw-shadow-sm:  0 2px 8px rgba(20, 46, 38, 0.06), 0 1px 2px rgba(20, 46, 38, 0.03);
    --sw-shadow-md:  0 8px 24px rgba(20, 46, 38, 0.08), 0 2px 6px rgba(20, 46, 38, 0.04);
    --sw-shadow-lg:  0 16px 48px rgba(20, 46, 38, 0.10), 0 4px 12px rgba(20, 46, 38, 0.05);
    --sw-shadow-xl:  0 24px 64px rgba(20, 46, 38, 0.12), 0 8px 20px rgba(20, 46, 38, 0.06);

    /* Radius scale */
    --sw-r-sm:  6px;
    --sw-r-md:  10px;
    --sw-r-lg:  14px;
    --sw-r-xl:  18px;
    --sw-r-2xl: 22px;

    /* Motion */
    --sw-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --sw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --sw-duration: 200ms;
}

/* ─── Root scope background ──────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) {
    background-color: var(--sw-ledger-paper) !important;
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(31, 107, 82, 0.06), transparent 60%),
        radial-gradient(ellipse 80% 50% at 100% 0%, rgba(196, 146, 46, 0.04), transparent 50%) !important;
}

/* ─── Header / Masthead ──────────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--sw-ledger-paper) 100%) !important;
    border-bottom: 1px solid var(--sw-ledger-rule) !important;
    padding: 28px 24px 22px !important;
    overflow: visible !important;
    position: relative !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3::before,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3::after {
    display: none !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-header-inner {
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-top {
    align-items: center !important;
    gap: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--sw-ledger-rule) !important;
    margin-bottom: 0 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-brand-wrapper {
    gap: 14px !important;
    align-items: center !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-brand-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--sw-r-md) !important;
    background: linear-gradient(145deg, var(--sw-ledger-emerald-mid), var(--sw-ledger-emerald)) !important;
    box-shadow: 0 4px 14px rgba(31, 107, 82, 0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-brand-icon i {
    color: #FFFFFF !important;
    font-size: 20px !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-eyebrow {
    margin: 0 0 3px !important;
    color: var(--sw-ledger-brass) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-main-title {
    margin: 0 !important;
    color: var(--sw-ledger-ink) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-sub-title {
    margin: 4px 0 0 !important;
    color: var(--sw-ledger-muted) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

/* Header action buttons */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-actions {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-actions button,
#smart-wordbook-scope:not(.sw-is-embedded) #adminBtn {
    min-height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid var(--sw-ledger-rule-strong) !important;
    border-radius: var(--sw-r-sm) !important;
    background: var(--sw-ledger-sheet) !important;
    color: var(--sw-ledger-ink) !important;
    box-shadow: var(--sw-shadow-xs) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    transition: background-color var(--sw-duration) var(--sw-ease),
                border-color var(--sw-duration) var(--sw-ease),
                box-shadow var(--sw-duration) var(--sw-ease),
                transform var(--sw-duration) var(--sw-ease) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-actions button:hover {
    transform: translateY(-1px) !important;
    background: var(--sw-ledger-emerald-pale) !important;
    border-color: rgba(31, 107, 82, 0.28) !important;
    box-shadow: var(--sw-shadow-sm) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #learningModesBtn {
    background: linear-gradient(145deg, var(--sw-ledger-emerald-mid), var(--sw-ledger-emerald)) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(31, 107, 82, 0.25) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #learningModesBtn:hover {
    background: linear-gradient(145deg, #2F9A78, var(--sw-ledger-emerald-mid)) !important;
    box-shadow: 0 6px 18px rgba(31, 107, 82, 0.32) !important;
    transform: translateY(-1px) !important;
}

/* ─── Hero Search ────────────────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-wrapper {
    margin-top: 20px !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-box {
    min-height: 54px !important;
    padding: 5px !important;
    border: 1px solid var(--sw-ledger-rule-strong) !important;
    border-radius: var(--sw-r-lg) !important;
    background: var(--sw-ledger-sheet) !important;
    box-shadow: var(--sw-shadow-sm) !important;
    transition: border-color var(--sw-duration) var(--sw-ease),
                box-shadow var(--sw-duration) var(--sw-ease) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-box:focus-within {
    transform: none !important;
    border-color: var(--sw-ledger-emerald) !important;
    box-shadow: 0 0 0 4px rgba(31, 107, 82, 0.12), var(--sw-shadow-sm) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--sw-r-md) !important;
    background: var(--sw-ledger-emerald-soft) !important;
    color: var(--sw-ledger-emerald) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-box input {
    color: var(--sw-ledger-ink) !important;
    font-family: inherit !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    background: transparent !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-box input::placeholder {
    color: var(--sw-ledger-muted-2) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-clear-btn {
    color: var(--sw-ledger-muted) !important;
    transition: color var(--sw-duration) var(--sw-ease) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-clear-btn:hover {
    color: var(--sw-ledger-ink) !important;
}

/* ─── Stats Grid ─────────────────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 18px !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-card {
    background: var(--sw-ledger-sheet) !important;
    border: 1px solid var(--sw-ledger-rule) !important;
    border-radius: var(--sw-r-md) !important;
    padding: 14px 16px !important;
    box-shadow: var(--sw-shadow-xs) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: transform var(--sw-duration) var(--sw-ease),
                box-shadow var(--sw-duration) var(--sw-ease),
                border-color var(--sw-duration) var(--sw-ease) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--sw-shadow-sm) !important;
    border-color: var(--sw-ledger-rule-strong) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--sw-r-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-icon-box.sw-icon-blue {
    background: var(--sw-ledger-emerald-soft) !important;
    color: var(--sw-ledger-emerald) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-icon-box.sw-icon-teal {
    background: #E0F2F1 !important;
    color: #0D7377 !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-icon-box.sw-icon-purple,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-icon-box.sw-icon-orange {
    background: var(--sw-ledger-brass-soft) !important;
    color: var(--sw-ledger-brass) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-num {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--sw-ledger-ink) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-label {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--sw-ledger-muted) !important;
    margin-top: 1px !important;
}

/* ─── Search Toolbar / Category filters ──────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-search-toolbar,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-toolbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px 0 8px !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-category-tabs,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-filter {
    gap: 6px !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-category-tabs button,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-btn {
    border-radius: 999px !important;
    border: 1px solid var(--sw-ledger-rule) !important;
    background: var(--sw-ledger-sheet) !important;
    color: var(--sw-ledger-ink-soft) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    transition: all var(--sw-duration) var(--sw-ease) !important;
    box-shadow: var(--sw-shadow-xs) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-category-tabs button:hover,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-btn:hover {
    border-color: rgba(31, 107, 82, 0.3) !important;
    background: var(--sw-ledger-emerald-pale) !important;
    color: var(--sw-ledger-emerald) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-category-tabs button.active,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-btn.active,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-btn.sw-active {
    background: var(--sw-ledger-emerald) !important;
    border-color: var(--sw-ledger-emerald) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(31, 107, 82, 0.22) !important;
}

/* ─── Word List Space ────────────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-list-space,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-main-content {
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 12px 24px 48px !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-word-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* ─── Word Cards ─────────────────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-word-card {
    background: var(--sw-ledger-sheet) !important;
    border: 1px solid var(--sw-ledger-rule) !important;
    border-radius: var(--sw-r-lg) !important;
    box-shadow: var(--sw-shadow-xs) !important;
    overflow: hidden !important;
    transition: transform var(--sw-duration) var(--sw-ease),
                box-shadow var(--sw-duration) var(--sw-ease),
                border-color var(--sw-duration) var(--sw-ease) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-word-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--sw-shadow-md) !important;
    border-color: rgba(31, 107, 82, 0.18) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-card-header {
    padding: 16px 18px !important;
    gap: 12px !important;
    align-items: center !important;
    cursor: pointer !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-word-title,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-card-header .sw-word {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--sw-ledger-ink) !important;
    letter-spacing: -0.01em !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-word-phonetic,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-phonetic {
    color: var(--sw-ledger-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Badges */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-category-badge,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-badge {
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    background: var(--sw-ledger-emerald-soft) !important;
    color: var(--sw-ledger-emerald) !important;
    border: none !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-draft-badge {
    background: var(--sw-ledger-brass-soft) !important;
    color: #8A6418 !important;
}

/* Accordion body */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-card-body,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-accordion-content {
    background: var(--sw-ledger-emerald-pale) !important;
    border-top: 1px solid var(--sw-ledger-rule) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-meaning,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-definition {
    color: var(--sw-ledger-ink-soft) !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-mnemonic {
    background: rgba(31, 107, 82, 0.07) !important;
    border-radius: var(--sw-r-sm) !important;
    border-left: 3px solid var(--sw-ledger-emerald) !important;
    color: var(--sw-ledger-ink) !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
}

/* ─── Learning Modes Panel ───────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-modes-sheet {
    border: 1px solid var(--sw-ledger-rule-strong) !important;
    border-radius: var(--sw-r-xl) !important;
    background: var(--sw-ledger-sheet) !important;
    box-shadow: var(--sw-shadow-xl) !important;
    overflow: hidden !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-modes-header {
    padding: 22px 24px 18px !important;
    background: linear-gradient(180deg, var(--sw-ledger-emerald-pale), var(--sw-ledger-sheet)) !important;
    border-bottom: 1px solid var(--sw-ledger-rule) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-modes-kicker,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-modes-section-label {
    color: var(--sw-ledger-brass) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-modes-header h3 {
    color: var(--sw-ledger-ink) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-modes-sub,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-mode-card p {
    color: var(--sw-ledger-muted) !important;
    font-size: 13.5px !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-mode-card {
    border: 1px solid var(--sw-ledger-rule) !important;
    border-radius: var(--sw-r-md) !important;
    background: var(--sw-ledger-sheet) !important;
    box-shadow: var(--sw-shadow-xs) !important;
    transition: transform var(--sw-duration) var(--sw-ease),
                box-shadow var(--sw-duration) var(--sw-ease),
                border-color var(--sw-duration) var(--sw-ease) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-mode-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--sw-shadow-md) !important;
    border-color: rgba(31, 107, 82, 0.22) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-mode-icon {
    background: var(--sw-ledger-emerald-soft) !important;
    color: var(--sw-ledger-emerald) !important;
    border-radius: var(--sw-r-sm) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-mode-card h4 {
    color: var(--sw-ledger-ink) !important;
    font-weight: 700 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-mode-go {
    border-radius: var(--sw-r-sm) !important;
    background: transparent !important;
    color: var(--sw-ledger-emerald) !important;
    font-weight: 600 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-premium-lock-badge {
    top: 8px !important;
    right: 8px !important;
    border: 1px solid rgba(196, 146, 46, 0.35) !important;
    border-radius: 999px !important;
    background: var(--sw-ledger-brass-soft) !important;
    color: #7A5816 !important;
    box-shadow: none !important;
    letter-spacing: 0.04em !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-mode-card.sw-premium-locked::after {
    background: rgba(246, 248, 245, 0.45) !important;
}

/* ─── Flashcard Modal ────────────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-modal-content {
    background: var(--sw-ledger-paper) !important;
    border-radius: 0 !important;
    box-shadow: var(--sw-shadow-xl) !important;
    border: 1px solid var(--sw-ledger-rule) !important;
    padding: 20px !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-flashcard {
    border-radius: var(--sw-r-xl) !important;
    box-shadow: var(--sw-shadow-lg) !important;
    border: 1px solid var(--sw-ledger-rule) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-flashcard-front,
#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-flashcard-back {
    background: var(--sw-ledger-sheet) !important;
    border-radius: var(--sw-r-xl) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-flashcard-front .sw-fc-word {
    color: var(--sw-ledger-ink) !important;
    font-weight: 700 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-flashcard-back .sw-fc-label {
    color: var(--sw-ledger-emerald) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-fc-mnemonic {
    background: var(--sw-ledger-emerald-soft) !important;
    color: var(--sw-ledger-ink) !important;
    border-radius: var(--sw-r-sm) !important;
    border-left: 3px solid var(--sw-ledger-emerald) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-flashcard-actions button {
    min-height: 44px !important;
    border-radius: var(--sw-r-md) !important;
    font-weight: 600 !important;
    box-shadow: var(--sw-shadow-xs) !important;
    transition: transform var(--sw-duration) var(--sw-ease),
                box-shadow var(--sw-duration) var(--sw-ease) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-flashcard-actions button:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--sw-shadow-sm) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-btn-success {
    background: linear-gradient(145deg, var(--sw-ledger-emerald-mid), var(--sw-ledger-emerald)) !important;
    color: #FFFFFF !important;
    border: none !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-btn-danger {
    background: transparent !important;
    border: 1px solid rgba(145, 45, 45, 0.22) !important;
    color: #8B2F2F !important;
}

/* ─── Buttons (global polish) ────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-btn-primary {
    background: linear-gradient(145deg, var(--sw-ledger-emerald-mid), var(--sw-ledger-emerald)) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--sw-r-md) !important;
    box-shadow: 0 4px 12px rgba(31, 107, 82, 0.22) !important;
    font-weight: 600 !important;
    transition: transform var(--sw-duration) var(--sw-ease),
                box-shadow var(--sw-duration) var(--sw-ease) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(31, 107, 82, 0.3) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--sw-ledger-rule-strong) !important;
    color: var(--sw-ledger-ink) !important;
    border-radius: var(--sw-r-sm) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-btn-ghost:hover {
    background: var(--sw-ledger-emerald-pale) !important;
    border-color: rgba(31, 107, 82, 0.25) !important;
}

/* ─── Score History & Modals ─────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-modal-overlay .sw-modal-content,
#smart-wordbook-scope:not(.sw-is-embedded) #scoreHistoryModal .sw-modal-content {
    border-radius: var(--sw-r-xl) !important;
    border: 1px solid var(--sw-ledger-rule) !important;
    box-shadow: var(--sw-shadow-xl) !important;
    background: var(--sw-ledger-sheet) !important;
}

/* ─── Toast polish ───────────────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-toast {
    border-radius: var(--sw-r-md) !important;
    box-shadow: var(--sw-shadow-lg) !important;
    font-weight: 500 !important;
}

/* ─── Admin Panel soft polish ────────────────────────── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-admin-panel {
    border-radius: var(--sw-r-xl) !important;
    border: 1px solid var(--sw-ledger-rule) !important;
    box-shadow: var(--sw-shadow-lg) !important;
    background: var(--sw-ledger-sheet) !important;
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 800px) {
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 {
        padding: 20px 16px 16px !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-top {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-header-actions {
        justify-content: flex-start !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-list-space,
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-main-content {
        padding: 12px 16px 36px !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-main-title {
        font-size: 22px !important;
    }
}

@media (max-width: 520px) {
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-brand-wrapper {
        align-items: flex-start !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-brand-icon {
        width: 42px !important;
        height: 42px !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-header-actions button span {
        display: none !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-header-actions button {
        width: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-card {
        padding: 12px !important;
        gap: 10px !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-icon-box {
        width: 34px !important;
        height: 34px !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-num {
        font-size: 18px !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-card-header {
        padding: 14px !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-modal-content {
        padding: 14px !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-flashcard {
        height: 260px !important;
    }
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-box {
        min-height: 50px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-word-card,
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-header-actions button,
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-mode-card,
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-card,
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-btn-primary {
        transition-duration: 1ms !important;
    }
}

/* ─── Tiny refinements for embedded mode consistency ─── */
#smart-wordbook-scope.sw-is-embedded {
    --sw-ledger-emerald: #1F6B52;
    --sw-ledger-ink: #142E26;
}

/* =====================================================
   SMART WORDBOOK — "INDIGO STUDIO" REDESIGN 3.0
   Matches the supplied "Vocabulary Mnemonic Studio" template
   (indigo/brand gradient hero, glass header, rounded-2xl/3xl
   cards). FRONTEND ONLY — admin panel design intentionally
   left untouched. Light mode only (no dark mode toggle).
   All existing classes, ids, and JS behaviour are 100% preserved —
   this block only recolors/reshapes on top of them.
   ===================================================== */

/* ── Re-point every design token to the Indigo Studio palette.
   Every rule in the previous layer already consumes these
   --sw-ledger-* variables, so this alone recolors the whole UI. ── */
#smart-wordbook-scope:not(.sw-is-embedded) {
    --sw-ledger-paper:        #F1F5F9;
    --sw-ledger-sheet:        #FFFFFF;
    --sw-ledger-sheet-elev:   #FFFFFF;
    --sw-ledger-ink:          #1E293B;
    --sw-ledger-ink-soft:     #334155;
    --sw-ledger-emerald:      #4F46E5;
    --sw-ledger-emerald-mid:  #6366F1;
    --sw-ledger-emerald-soft: #EEF2FF;
    --sw-ledger-emerald-pale: #F5F6FF;
    --sw-ledger-brass:        #D97706;
    --sw-ledger-brass-soft:   #FFFBEB;
    --sw-ledger-rule:         rgba(30, 41, 59, 0.08);
    --sw-ledger-rule-strong:  rgba(30, 41, 59, 0.14);
    --sw-ledger-muted:        #64748B;
    --sw-ledger-muted-2:      rgba(30, 41, 59, 0.38);

    --sw-shadow-xs: 0 1px 2px rgba(30, 41, 59, 0.05);
    --sw-shadow-sm: 0 2px 10px rgba(30, 41, 59, 0.07), 0 1px 2px rgba(30, 41, 59, 0.04);
    --sw-shadow-md: 0 10px 28px rgba(79, 70, 229, 0.12), 0 2px 6px rgba(30, 41, 59, 0.05);
    --sw-shadow-lg: 0 18px 50px rgba(79, 70, 229, 0.16), 0 4px 12px rgba(30, 41, 59, 0.06);
    --sw-shadow-xl: 0 26px 66px rgba(79, 70, 229, 0.20), 0 8px 22px rgba(30, 41, 59, 0.08);

    --sw-r-sm:  10px;
    --sw-r-md:  14px;
    --sw-r-lg:  18px;
    --sw-r-xl:  22px;
    --sw-r-2xl: 28px;

    font-family: 'Hind Siliguri', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ── Root scope background: flat slate, no ledger-paper texture ── */
#smart-wordbook-scope:not(.sw-is-embedded) {
    background-color: var(--sw-ledger-paper) !important;
    background-image: none !important;
}

/* ── Header → Indigo gradient "hero" band (brand nav + search + stats) ── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 {
    background: linear-gradient(120deg, #4f46e5 0%, #4338ca 55%, #312e81 100%) !important;
    border-bottom: none !important;
    padding: 26px 24px 28px !important;
    overflow: hidden !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    box-shadow: 0 8px 30px rgba(49, 46, 129, 0.25) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: -60px !important;
    bottom: -80px !important;
    width: 260px !important;
    height: 260px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    filter: blur(40px) !important;
    pointer-events: none !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: 20% !important;
    top: -60px !important;
    width: 190px !important;
    height: 190px !important;
    border-radius: 999px !important;
    background: rgba(251, 191, 36, 0.22) !important;
    filter: blur(32px) !important;
    pointer-events: none !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-inner {
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-top {
    align-items: center !important;
    gap: 20px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    margin-bottom: 0 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-brand-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: var(--sw-r-md) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: none !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-brand-icon i {
    color: #FFFFFF !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-eyebrow {
    color: #FDE68A !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-main-title {
    color: #FFFFFF !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-sub-title {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Header action buttons — glass pills on the gradient */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-actions button,
#smart-wordbook-scope:not(.sw-is-embedded) #adminBtn {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: none !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-actions button:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #learningModesBtn {
    background: #FFFFFF !important;
    color: #4338CA !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) #learningModesBtn:hover {
    background: #EEF2FF !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
}

/* Bookmark/favorites button — rose accent, like the template's star chip */
#smart-wordbook-scope:not(.sw-is-embedded) #bookmarkFilterBtn {
    background: rgba(255, 228, 230, 0.18) !important;
    border-color: rgba(255, 228, 230, 0.35) !important;
    color: #FFE4E6 !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) #bookmarkFilterBtn i {
    color: #FB7185 !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) #bookmarkFilterBtn:hover {
    background: rgba(255, 228, 230, 0.28) !important;
}

/* ── Hero Search — glass input on the gradient ── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-box {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: none !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-box:focus-within {
    border-color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-icon {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-box input {
    color: #FFFFFF !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-box input::placeholder {
    color: rgba(255, 255, 255, 0.62) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-clear-btn {
    color: rgba(255, 255, 255, 0.75) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-clear-btn:hover {
    color: #FFFFFF !important;
}

/* ── Stats grid — glass chips, like the hero counter badges ── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-card {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: none !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-card:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    box-shadow: none !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-icon-box.sw-icon-blue,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-icon-box.sw-icon-teal,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-icon-box.sw-icon-purple,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-icon-box.sw-icon-orange {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-num {
    color: #FFFFFF !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-stat-label {
    color: rgba(255, 255, 255, 0.75) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-category-select {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-category-select option {
    color: #1E293B !important;
}

/* ── Toolbar / category & letter filters ── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-category-tabs button:hover,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-btn:hover {
    border-color: rgba(79, 70, 229, 0.30) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-category-tabs button.active,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-btn.active,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-btn.sw-active {
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.28) !important;
}

/* ── Word cards ── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-word-card:hover {
    border-color: rgba(79, 70, 229, 0.22) !important;
}

/* ── Mnemonic strip ── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-mnemonic {
    background: rgba(79, 70, 229, 0.07) !important;
}

/* ── Learning modes panel ── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-modes-header {
    background: linear-gradient(180deg, var(--sw-ledger-emerald-pale), var(--sw-ledger-sheet)) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-mode-card:hover {
    border-color: rgba(79, 70, 229, 0.24) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-premium-lock-badge {
    border: 1px solid rgba(217, 119, 6, 0.32) !important;
    color: #92400E !important;
}

/* ── Flashcard modal ── */
#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-btn-danger {
    border: 1px solid rgba(225, 29, 72, 0.24) !important;
    color: #BE123C !important;
}

/* ── Buttons (global) ── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-btn-primary {
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.26) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.34) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-btn-ghost:hover {
    border-color: rgba(79, 70, 229, 0.26) !important;
}

/* ── Result screens: correct/wrong states keep semantic emerald/rose,
   independent of the brand palette (kept as-is on purpose). ── */

@media (max-width: 800px) {
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3::before,
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3::after {
        display: none !important;
    }
}

/* =====================================================
   INDIGO STUDIO — specificity fixes
   Neutralizes the older "Light Hero V3" layer's opaque white
   card background on .sw-header-v3 .sw-header-inner (and a
   few sibling elements) so the indigo gradient + glass
   elements actually show through, matching the template.
   ===================================================== */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-header-inner {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    #smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-header-inner {
        padding: 0 !important;
        border-radius: 0 !important;
    }
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-brand-icon {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: none !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-brand-icon i {
    color: #FFFFFF !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-eyebrow { color: #FDE68A !important; }
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-main-title {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: none !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-sub-title { color: rgba(255, 255, 255, 0.80) !important; }

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-header-actions button,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #adminBtn,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #scoreHistoryBtn,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-btn-ghost {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-header-actions button:hover,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #adminBtn:hover,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #scoreHistoryBtn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #learningModesBtn,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-btn-primary {
    background: #FFFFFF !important;
    color: #4338CA !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #learningModesBtn:hover {
    background: #EEF2FF !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #bookmarkFilterBtn {
    background: rgba(255, 228, 230, 0.18) !important;
    border-color: rgba(255, 228, 230, 0.35) !important;
    color: #FFE4E6 !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #bookmarkFilterBtn i { color: #FB7185 !important; }
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #bookmarkFilterBtn.active,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #bookmarkFilterBtn:hover {
    background: rgba(255, 228, 230, 0.28) !important;
    border-color: rgba(255, 228, 230, 0.45) !important;
    color: #FFE4E6 !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-hero-search-box {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-hero-search-box:focus-within {
    background: rgba(255, 255, 255, 0.20) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-hero-search-icon { color: #FFFFFF !important; }
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-hero-search-box input { color: #FFFFFF !important; }
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-hero-search-box input::placeholder { color: rgba(255, 255, 255, 0.65) !important; }
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-hero-clear-btn { color: rgba(255, 255, 255, 0.75) !important; }

#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-stat-card {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-icon-blue,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-icon-teal,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-icon-amber,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-icon-purple {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-stat-num { color: #FFFFFF !important; }
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-stat-label { color: rgba(255, 255, 255, 0.75) !important; }
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 .sw-category-select { color: #FFFFFF !important; }

/* =====================================================
   INDIGO STUDIO — Batch section, toolbar & word-card accents
   (previously left untouched — this is what was missing)
   ===================================================== */

/* Batch phase banner (full-width drop banner on batch start) */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-banner-inner {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35) !important;
}

/* Toolbar (sort + alphabet filter bar above the word list) */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-search-toolbar,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-toolbar {
    /* background: #ffffff !important; */
    /* border: 1px solid rgba(30, 41, 59, 0.08) !important; */
    padding: 10px !important;
    border-radius: var(--sw-r-lg) !important;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.04) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) #sortBy {
    color: #1e293b !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-btn {
    border-radius: 999px !important;
    border: 1px solid rgba(30, 41, 59, 0.10) !important;
    background: transparent !important;
    color: #334155 !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-btn:hover {
    border-color: rgba(79, 70, 229, 0.30) !important;
    background: #EEF2FF !important;
    color: #4338CA !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-letter-btn.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28) !important;
}

#smart-wordbook-scope:not(.sw-is-embedded) .sw-word-card:hover {
    border-color: #E0E7FF !important;
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.10) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-meaning-row {
    color: #4338CA !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-btn-speaker {
    background: #EEF2FF !important;
    border: 1px solid #E0E7FF !important;
    color: #4F46E5 !important;
}

/* ── Batch groups (the accordion list at the bottom) ── */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-group {
    border-radius: var(--sw-r-lg) !important;
    border: 1px solid rgba(30, 41, 59, 0.08) !important;
    box-shadow: var(--sw-shadow-xs) !important;
    transition: box-shadow 200ms ease, border-color 200ms ease !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-group:hover {
    box-shadow: var(--sw-shadow-sm) !important;
    border-color: rgba(79, 70, 229, 0.18) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-group-header {
    background: linear-gradient(180deg, #EEF2FF 0%, #FFFFFF 100%) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-group:has(.sw-batch-words-wrapper.open) .sw-batch-group-header {
    border-bottom-color: rgba(79, 70, 229, 0.14) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-index {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.28) !important;
    border-radius: var(--sw-r-md) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-label {
    color: #1E293B !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-range {
    color: #64748B !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-toggle-btn {
    border: 1px solid rgba(30, 41, 59, 0.10) !important;
    color: #4338CA !important;
    border-radius: var(--sw-r-sm) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-toggle-btn:hover {
    background: #EEF2FF !important;
    border-color: rgba(79, 70, 229, 0.25) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-exam-btn {
    border-radius: var(--sw-r-sm) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-batch-breakdown {
    border-top-color: rgba(30, 41, 59, 0.08) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-breakdown-row {
    color: #334155 !important;
    border-bottom-color: rgba(30, 41, 59, 0.05) !important;
}

/* =====================================================
   INDIGO STUDIO — brand token override (root cause fix)
   Most of the flashcard/quiz/fill-blanks/results/toast/score-
   history/meaning-test colors already read from these --djv-*
   custom properties with a blue fallback. Overriding them here
   recolors ALL of those screens at once, without having to
   touch every individual rule.
   ===================================================== */
#smart-wordbook-scope:not(.sw-is-embedded) {
    --djv-primary:       #4F46E5;
    --djv-primary-dark:  #4338CA;
    --djv-primary-mid:   #6366F1;
    --djv-primary-light: #A5B4FC;
    --djv-primary-pale:  #C7D2FE;
    --djv-primary-soft:  #EEF2FF;
}

/* A handful of spots hard-code the second gradient stop as blue
   (#3b82f6) instead of reading a token — patch those directly. */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-progress-fill,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-result-graph-bar {
    background: linear-gradient(90deg, #4338CA, #6366F1) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-flashcard-front {
    background: linear-gradient(135deg, #4338CA, #6366F1) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-toast-info {
    background: linear-gradient(135deg, #4338CA, #6366F1) !important;
}

/* Fill-blanks input: indigo focus ring instead of the browser default */
#smart-wordbook-scope:not(.sw-is-embedded) #fillBlanksInput {
    border-color: #E2E8F0 !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) #fillBlanksInput:focus {
    outline: none !important;
    border-color: #6366F1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14) !important;
}

/* Score-history & result "light indigo" chips already use #f0f4ff,
   which is close enough to --sw-ledger-emerald-soft — nudge it to
   the exact brand-50 tone used elsewhere. */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-score-summary,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-score-simple-item,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-opt-letter {
    background: #EEF2FF !important;
}

/* =====================================================
   INDIGO STUDIO — Meaning Test (অর্থ পরীক্ষা / সমার্থক-বিপরীত)
   These already leaned indigo (#4f46e5) but ended their gradients
   on plain blue (#2563eb) or cyan (#0ea5e9) — closing the loop so
   every accent in this feature reads as one consistent palette.
   ===================================================== */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-meaning-test-tab.active,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-meaning-test-sel-badge,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-meaning-test-chip.active,
#smart-wordbook-scope:not(.sw-is-embedded) .sw-meaning-test-analysis-btn {
    background: linear-gradient(135deg, #4F46E5, #6366F1) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.32) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-mt-setup-hero {
    background: linear-gradient(135deg, #312e81 0%, #4338CA 55%, #6366F1 100%) !important;
    box-shadow: 0 12px 28px rgba(67, 56, 202, 0.28) !important;
}
#smart-wordbook-scope:not(.sw-is-embedded) .sw-meaning-test-chip:hover {
    border-color: #6366F1 !important;
    background: #EEF2FF !important;
}

/* =====================================================
   BATCH UNLOCK (60%) + LOAD MORE — non-destructive additions
   ===================================================== */
#smart-wordbook-scope .sw-batch-locked {
    opacity: 0.82;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
#smart-wordbook-scope .sw-batch-locked-header {
    cursor: default !important;
}
#smart-wordbook-scope .sw-batch-locked-msg {
    margin: 0 12px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #b45309;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
#smart-wordbook-scope .sw-batch-score.locked-tag {
    background: #f1f5f9;
    color: #64748b;
}
#smart-wordbook-scope .sw-batch-score.unlocked-tag {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
#smart-wordbook-scope .sw-batch-load-more-wrap {
    text-align: center;
    padding: 16px 0 8px;
}
#smart-wordbook-scope .sw-batch-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 14px;
    border: 2px solid var(--djv-primary, #4f46e5);
    background: #fff;
    color: var(--djv-primary, #4f46e5);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12);
}
#smart-wordbook-scope .sw-batch-load-more-btn:hover {
    background: var(--djv-primary, #4f46e5);
    color: #fff;
}
#smart-wordbook-scope .sw-batch-unlock-hint {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #b45309;
}
/* Light default surface reinforcement (non-destructive) */
#smart-wordbook-scope:not(.sw-is-embedded) {
    background: #f8fafc;
}

/* Topic / Category quick filter bar */
#smart-wordbook-scope .sw-topic-filter-bar {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
#smart-wordbook-scope .sw-topic-filter-label {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#smart-wordbook-scope .sw-topic-filter-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#smart-wordbook-scope .sw-topic-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}
#smart-wordbook-scope .sw-topic-btn:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}
#smart-wordbook-scope .sw-topic-btn.active {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
}

/* =====================================================
   BATCH CARD GRID (HTML-template style) + header fixes
   ===================================================== */

/* Header must scroll away — never sticky */
#smart-wordbook-scope .sw-header,
#smart-wordbook-scope .sw-header.sw-header-v3,
#smart-wordbook-scope .sw-header.sw-header-v2 {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
}

/* শিখুন button: no extra icon background circle */
#smart-wordbook-scope .sw-header-v3 #learningModesBtn i,
#smart-wordbook-scope .sw-header-v3 .sw-btn-primary i {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    display: inline !important;
    color: inherit !important;
}

/* Section head */
#smart-wordbook-scope .sw-batch-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 16px;
    width: 100%;
}
#smart-wordbook-scope .sw-batch-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}
#smart-wordbook-scope .sw-batch-section-sub {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #b45309;
}
#smart-wordbook-scope .sw-batch-count-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
}

/* Card grid — matches HTML template screenshots */
#smart-wordbook-scope .sw-batch-card-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}
@media (min-width: 640px) {
    #smart-wordbook-scope .sw-batch-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 900px) {
    #smart-wordbook-scope .sw-batch-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1100px) {
    #smart-wordbook-scope .sw-batch-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

#smart-wordbook-scope .sw-batch-card {
    background: #ffffffb0;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#smart-wordbook-scope .sw-batch-card:not(.is-locked):hover {
    border-color: #a5b4fc;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.1);
}
#smart-wordbook-scope .sw-batch-card.is-locked {
    background: #f8fafc;
    opacity: 0.9;
}

#smart-wordbook-scope .sw-batch-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
#smart-wordbook-scope .sw-batch-card-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#smart-wordbook-scope .sw-batch-card-title .fa-folder-open { color: #4f46e5; }
#smart-wordbook-scope .sw-batch-card-title .fa-lock { color: #f59e0b; }

#smart-wordbook-scope .sw-batch-card-status {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}
#smart-wordbook-scope .sw-batch-card-status.open {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
#smart-wordbook-scope .sw-batch-card-status.passed {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
#smart-wordbook-scope .sw-batch-card-status.locked {
    background: #e2e8f0;
    color: #64748b;
}

#smart-wordbook-scope .sw-batch-card-range {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}

#smart-wordbook-scope .sw-batch-card-actions {
    display: flex;
    gap: 8px;
}
#smart-wordbook-scope .sw-batch-card-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
#smart-wordbook-scope .sw-batch-card-btn.study {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
}
#smart-wordbook-scope .sw-batch-card-btn.study:hover {
    background: #4f46e5;
    color: #fff;
}
#smart-wordbook-scope .sw-batch-card-btn.exam {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}
#smart-wordbook-scope .sw-batch-card-btn.exam:hover {
    background: #059669;
    color: #fff;
}

#smart-wordbook-scope .sw-batch-card-locked-msg {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: #b45309;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

/* =====================================================
   USER FIXES — full-width batch grid, inline word cards,
   topic bar, category select, button colors, flashcard bg
   ===================================================== */

/* Batch card grid: full content width (not one-sided) */
#smart-wordbook-scope .sw-list-space {
    max-width: 1100px !important;
    width: 100% !important;
}
#smart-wordbook-scope .sw-batch-card-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 14px !important;
}
@media (min-width: 640px) {
    #smart-wordbook-scope .sw-batch-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 900px) {
    #smart-wordbook-scope .sw-batch-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1100px) {
    #smart-wordbook-scope .sw-batch-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
#smart-wordbook-scope .sw-batch-section-head {
    width: 100% !important;
    max-width: 100% !important;
}

/* Word cards: inline grid (not stacked column only) */
#smart-wordbook-scope .sw-word-card-inline,
#smart-wordbook-scope #batchStudyModalBody.sw-list-space {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 12px !important;
    flex-direction: unset !important;
    max-width: 100% !important;
}
@media (min-width: 700px) {
    #smart-wordbook-scope .sw-word-card-inline,
    #smart-wordbook-scope #batchStudyModalBody.sw-list-space {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
#smart-wordbook-scope .sw-word-card-inline .sw-word-card,
#smart-wordbook-scope #batchStudyModalBody .sw-word-card {
    width: 100% !important;
    margin: 0 !important;
}

/* Category select — remove background */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-category-select {
    background: none !important;
    background-color: transparent !important;
}

/* Topic filter bar */
#smart-wordbook-scope .sw-topic-filter-bar {
    background: #ffffff5c !important;
    color: #d7d6e0 !important;
}
#smart-wordbook-scope .sw-topic-filter-label {
    color: #fff !important;
}

/* Batch action buttons — force colors */
#smart-wordbook-scope .sw-batch-card-btn.study {
    background: rgba(79, 70, 229, 0.12) !important;
    color: #4f46e5 !important;
}
#smart-wordbook-scope .sw-batch-card-btn.study:hover {
    background: #4f46e5 !important;
    color: #fff !important;
}
#smart-wordbook-scope .sw-batch-card-btn.exam {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
}
#smart-wordbook-scope .sw-batch-card-btn.exam:hover {
    background: #059669 !important;
    color: #fff !important;
}

/* Bookmark filter icon white on v3 header */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-header-v3 #bookmarkFilterBtn i {
    color: #ffffff !important;
}

/* Flashcard front/back indigo */
#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-flashcard-front,
#smart-wordbook-scope:not(.sw-is-embedded) #flashcardModal .sw-flashcard-back {
    background: #4f46e5 !important;
}

/* Batch study modal — full page slide from right */
#smart-wordbook-scope .sw-batch-study-sheet {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
#smart-wordbook-scope .sw-batch-study-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}
#smart-wordbook-scope .sw-batch-study-header h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}
#smart-wordbook-scope .sw-batch-study-body {
    overflow-y: auto !important;
    padding: 16px !important;
    margin: 0 !important;
}

/* Learning modes — ensure all cards visible & neat */
#smart-wordbook-scope .sw-modes-grid,
#smart-wordbook-scope .sw-modes-grid-4,
#smart-wordbook-scope .sw-modes-grid-exam {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
@media (min-width: 700px) {
    #smart-wordbook-scope .sw-modes-grid,
    #smart-wordbook-scope .sw-modes-grid-4,
    #smart-wordbook-scope .sw-modes-grid-exam {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
#smart-wordbook-scope .sw-mode-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    min-height: 120px !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#smart-wordbook-scope .sw-modes-section-label {
    display: block !important;
    margin: 16px 0 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #64748b !important;
}

/* =====================================================
   CRITICAL LAYOUT FIX — full-width batch grid (screenshot fix)
   ===================================================== */
#smart-wordbook-scope #dictionaryList.sw-list-space,
#smart-wordbook-scope .sw-list-space {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

#smart-wordbook-scope .sw-batch-section-head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 8px 0 16px 0 !important;
    box-sizing: border-box !important;
}

#smart-wordbook-scope .sw-batch-card-grid {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
@media (min-width: 640px) {
    #smart-wordbook-scope .sw-batch-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 900px) {
    #smart-wordbook-scope .sw-batch-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1100px) {
    #smart-wordbook-scope .sw-batch-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

#smart-wordbook-scope .sw-batch-load-more-wrap {
    width: 100% !important;
    flex: 0 0 auto !important;
}

/* Batch study modal — full word cards visible (meaning + mnemonic) */
#smart-wordbook-scope #batchStudyModal .sw-batch-study-sheet {
    max-width: 100% !important;
    width: 100% !important;
}
#smart-wordbook-scope #batchStudyModalBody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
}
#smart-wordbook-scope #batchStudyModalBody .sw-word-card {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
}
#smart-wordbook-scope #batchStudyModalBody .sw-meaning-row {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 15px !important;
    color: #1e40af !important;
    margin-top: 4px !important;
}
#smart-wordbook-scope #batchStudyModalBody .sw-card-mnemonic {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#smart-wordbook-scope #batchStudyModalBody .sw-card-header {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
#smart-wordbook-scope #batchStudyModalBody .sw-word-trigger {
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

/* When filtering (inline word cards) keep 2-col grid */
#smart-wordbook-scope .sw-list-space.sw-word-card-inline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}
@media (min-width: 700px) {
    #smart-wordbook-scope .sw-list-space.sw-word-card-inline {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =====================================================
   User requested one-by-one fixes
   ===================================================== */

/* 1. Modes sheet scroll — already set overflow-y:auto above; reinforce */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-learning-modes-panel .sw-modes-sheet {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: min(88vh, 900px) !important;
}

/* 2. Exam / learning mode cards — cleaner design */
#smart-wordbook-scope .sw-modes-grid,
#smart-wordbook-scope .sw-modes-grid-4,
#smart-wordbook-scope .sw-modes-grid-exam {
    padding: 12px 20px 20px !important;
    gap: 12px !important;
}
#smart-wordbook-scope .sw-mode-card {
    border-radius: 16px !important;
    border: 1px solid #e8eef5 !important;
    background: #ffffff !important;
    padding: 16px 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}
#smart-wordbook-scope .sw-mode-card:hover {
    border-color: #a5b4fc !important;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.12) !important;
    transform: translateY(-2px) !important;
}
#smart-wordbook-scope .sw-mode-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    margin-bottom: 10px !important;
}
#smart-wordbook-scope .sw-mode-card h4 {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin: 0 0 4px 0 !important;
    color: #0f172a !important;
}
#smart-wordbook-scope .sw-mode-card p {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}
#smart-wordbook-scope .sw-modes-section-label {
    padding: 8px 20px 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    letter-spacing: 0.02em !important;
}

/* 3. Global button padding */
#smart-wordbook-scope button {
    padding: 8px 30px !important;
}

/* Keep compact batch card buttons from becoming too wide */
#smart-wordbook-scope .sw-batch-card-btn {
    padding: 8px 12px !important;
}
#smart-wordbook-scope .sw-topic-btn {
    padding: 8px 14px !important;
}
#smart-wordbook-scope .sw-letter-btn {
    padding: 6px 10px !important;
}
#smart-wordbook-scope .sw-btn-icon,
#smart-wordbook-scope .sw-btn-speaker,
#smart-wordbook-scope .sw-modal-close-x,
#smart-wordbook-scope .sw-chevron-btn {
    padding: 0 !important;
}

/* 4. Batch card actions */
#smart-wordbook-scope .sw-batch-card-actions {
    justify-content: space-around !important;
}

/* 5. Hero search input font size */
#smart-wordbook-scope:not(.sw-is-embedded) .sw-hero-search-box input {
    font-size: 16px !important;
}