/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

/* ===== Page layout — sticky footer ===== */
html, body {
    height: 100%;
}

.page--flex {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-content-grow {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

@media (max-width: 767px) {
    footer {
        display: none !important;
    }
}
/* ===== /Page layout ===== */

/* ===== User dropdown menu ===== */
.user-dropdown-wrapper {
    position: relative;
}

.user-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 1000;
}

.user-dropdown-menu.user-dropdown-menu--open {
    display: block;
}

ul#top_menu .user-dropdown-menu li a,
.user-dropdown-menu li a {
    display: block;
    padding: 10px 18px;
    color: #333 !important;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    opacity: 1 !important;
    transition: background .15s, color .15s;
}

ul#top_menu .user-dropdown-menu li a:hover,
.user-dropdown-menu li a:hover {
    background: #f5f5f5;
    color: #004dda !important;
    opacity: 1 !important;
}
/* ===== /User dropdown menu ===== */

/* ===== How It Works toggle link ===== */
.how-it-works-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    text-decoration: none;
    padding: 8px 20px;
    border: 2px solid #667eea;
    border-radius: 50px;
    margin: 24px 0;
    transition: background 0.2s ease, color 0.2s ease;
}
.how-it-works-link:hover {
    background: #667eea;
    color: #fff;
}
#howItWorksChevron {
    transition: transform 0.3s ease;
}
#howItWorksChevron.open {
    transform: rotate(180deg);
}
#divHowItWorks.is-visible {
    animation: fadeSlideDown 0.35s ease forwards;
}
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ===== /How It Works toggle link ===== */

/* ===== Desktop Sign In CTA Banner ===== */
.signin-cta-banner {
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px 32px;
    margin: 0 auto 8px;
    max-width: 780px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1.5px solid #c7d2fe;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.10);
}

.signin-cta-banner__text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #3730a3;
}

.signin-cta-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, #004dda 0%, #0077ff 100%);
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 77, 218, 0.35);
    transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease;
    flex-shrink: 0;
}

.signin-cta-banner__btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 77, 218, 0.45);
}

.signin-cta-banner__btn:active {
    transform: scale(0.97);
}
/* ===== /Desktop Sign In CTA Banner ===== */

/* ===== Language dropdowns ===== */

/* Default state: language picked — small and faded */
#divLanguages {
    opacity: 0.55;
    transition: opacity 0.25s ease;
}
#divLanguages:hover,
#divLanguages:focus-within {
    opacity: 1;
}

/* lang-unpicked state: no language selected yet — full size, full opacity */
#divLanguages.lang-unpicked {
    opacity: 1;
}
#divLanguages.lang-unpicked .form-label {
    font-size: 13px;
    font-weight: 500;
}
#divLanguages.lang-unpicked .select2-container .select2-selection--single {
    height: 38px;
    font-size: 14px;
}
#divLanguages.lang-unpicked .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
    padding: 0 24px 0 10px;
}
#divLanguages.lang-unpicked .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
}

/* Search bar faded when no language picked yet */
#formSearchBar {
    transition: opacity 0.25s ease;
}
#formSearchBar.search-faded {
    opacity: 0.4;
}
#formSearchBar.search-faded:hover,
#formSearchBar.search-faded:focus-within {
    opacity: 1;
}

/* Lighter, smaller labels on all screen sizes */
#divLanguages .form-label {
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
    text-align: center;
    display: block;
    width: 100%;
}

/* Smaller Select2 widget — desktop */
#divLanguages .select2-container .select2-selection--single {
    height: 30px;
    font-size: 12px;
    display: flex;
    align-items: center;
}
#divLanguages .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: normal;
    padding: 0 20px 0 8px;
    font-size: 12px;
    text-align: center;
    width: 100%;
}
#divLanguages .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
}

/* Mobile — tighten further */
@media (max-width: 767px) {
    #divLanguages .form-label {
        font-size: 10px;
        margin-bottom: 2px;
    }
    #divLanguages .select2-container .select2-selection--single {
        height: 28px;
    }
    #divLanguages .select2-container .select2-selection--single .select2-selection__rendered {
        font-size: 11px;
        line-height: normal;
        padding: 0 20px 0 8px;
    }
    #divLanguages .select2-container .select2-selection--single .select2-selection__arrow {
        height: 100%;
        top: 0;
    }
    #divLanguages.lang-unpicked .select2-container .select2-selection--single {
        height: 34px;
    }
    #divLanguages.lang-unpicked .select2-container .select2-selection--single .select2-selection__rendered {
        font-size: 12px;
    }
}
/* ===== /Language dropdowns ===== */

/* ===== Search button — mobile ===== */

/* Always allow wrapping so #charButtonsRow (col-12, order-lg-3) falls below the
   text input + submit row (col-lg-10 + col-lg-2 = 12 cols) on desktop,
   and the mobile order overrides still work. */
.custom-search-input-2 {
    flex-wrap: wrap;
}

@media (max-width: 991px) {

    .custom-search-input-2 input[type='submit'],
    .custom-search-input-2 .search-submit-btn {
        width: 85%;
        display: block;
        margin: 12px auto 0 auto;
        height: 48px;
        font-size: 15px;
        font-weight: 600;
        padding: 0 24px;
        border-radius: 3px;
    }

    /* Constrain and centre the search bar column */
    #formSearchBar .col-md-6 {
        width: 92%;
        max-width: 92%;
        flex: 0 0 92%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Prevent mobile auto-zoom on focus (browser zooms when font-size < 16px) */
    #formSearchBar input[type='text'] {
        font-size: 16px;
    }

    /* Character buttons row: full width and centred on mobile */
    #charButtonsRow {
        padding-left: 0;
        padding-right: 0;
    }
}
/* ===== Search button — loading state ===== */
.search-submit-btn {
    /* inherit the theme's input[type=submit] look exactly */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    border: none;
    cursor: pointer;
    /* theme colours (matches the existing submit input) */
    background: #fc5b62;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 0 3px 3px 0;
    padding: 0 16px;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    position: relative;
    overflow: hidden;
}
.search-submit-btn:hover {
    background: #e84c53;
    box-shadow: 0 4px 16px rgba(252, 91, 98, 0.45);
    transform: translateY(-1px);
}
.search-submit-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Spinner dots — hidden by default */
.search-btn-spinner {
    display: none;
    align-items: center;
    gap: 4px;
}
.search-spinner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: search-dot-bounce 1.2s ease-in-out infinite;
    display: inline-block;
}
.search-spinner-dot:nth-child(2) { animation-delay: 0.2s; }
.search-spinner-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes search-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40%            { transform: scale(1);   opacity: 1;   }
}

/* Loading state — triggered via JS */
.search-submit-btn.is-loading {
    pointer-events: none;
    background: #e84c53;
}
.search-submit-btn.is-loading .search-btn-text {
    display: none;
}
.search-submit-btn.is-loading .search-btn-spinner {
    display: flex;
}
/* ===== /Search button — loading state ===== */

/* ===== /Search button — mobile ===== */


/* ===== Floating Quiz Button (FAB) ===== */
.quiz-fab {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 12px 14px;
    border-radius: 50px;
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 8px 28px rgba(102, 126, 234, 0.55), 0 2px 8px rgba(0,0,0,0.18);
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease, background 0.22s ease;
    cursor: pointer;
    /* Desktop: top-right, just below the sticky header */
    top: 80px;
    right: 24px;
    bottom: auto;
    left: auto;
}
    .quiz-fab:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 14px 36px rgba(102, 126, 234, 0.65), 0 4px 12px rgba(0,0,0,0.22);
        background: linear-gradient(135deg, #b31217 0%, #240b36 100%);
        color: #fff !important;
        text-decoration: none !important;
    }
.quiz-fab:active {
    transform: scale(0.97);
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.45);
}
.quiz-fab__icon {
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.quiz-fab__label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.quiz-fab__badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 50px;
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #1a1a2e;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 210, 0, 0.5);
    animation: quiz-fab-pulse 2.2s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes quiz-fab-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.55); }
    60%  { box-shadow: 0 0 0 7px rgba(255, 210, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 210, 0, 0); }
}
/* Mobile: bottom-right */
@media (max-width: 991px) {
    .quiz-fab {
        top: auto;
        bottom: 24px;
        right: 20px;
    }
    .quiz-fab__label {
        display: none;
    }
    .quiz-fab {
        padding: 14px;
        border-radius: 50%;
    }
    .quiz-fab__icon {
        font-size: 24px;
    }
}
/* FAB update animation */
.quiz-fab--updated {
    animation: quiz-fab-glow-burst 0.7s cubic-bezier(.36,.07,.19,.97) forwards;
}
@keyframes quiz-fab-glow-burst {
    0%   { transform: scale(1);    box-shadow: 0 8px 28px rgba(102,126,234,0.55), 0 2px 8px rgba(0,0,0,0.18); }
    30%  { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(102,126,234,0.25), 0 0 40px 8px rgba(102,126,234,0.5); }
    60%  { transform: scale(1.08); box-shadow: 0 0 0 18px rgba(102,126,234,0.08), 0 0 55px 12px rgba(118,75,162,0.35); }
    100% { transform: scale(1);    box-shadow: 0 8px 28px rgba(102,126,234,0.55), 0 2px 8px rgba(0,0,0,0.18); }
}
/* +1 floating particle */
.quiz-fab__plus {
    position: fixed;
    z-index: 10000;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #ffd200;
    text-shadow: 0 2px 8px rgba(255,180,0,0.7);
    pointer-events: none;
    white-space: nowrap;
    animation: quiz-fab-plus-float 1s ease-out forwards;
}
@keyframes quiz-fab-plus-float {
    0%   { opacity: 1;   transform: translateY(0)   scale(1); }
    60%  { opacity: 1;   transform: translateY(-32px) scale(1.2); }
    100% { opacity: 0;   transform: translateY(-58px) scale(0.8); }
}
/* Badge pop when count updates */
@keyframes quiz-badge-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.quiz-fab__badge--pop {
    animation: quiz-badge-pop 0.45s cubic-bezier(.36,.07,.19,.97) forwards,
               quiz-fab-pulse 2.2s ease-in-out infinite 0.45s;
}
/* ===== Hero section: expand to fit results ===== */
/* Override the theme's fixed 620px height so the section grows when results are shown */
.hero_single.jarallax.has-results {
    height: auto !important;
    min-height: 620px;
}
/* Switch from centred to top-aligned so dropdowns/search/quiz stay visible at the top */
.hero_single.jarallax.has-results .wrapper {
    justify-content: flex-start !important;
    padding-top: 60px;
    padding-bottom: 60px;
    overflow-x: hidden;
}
/* Hide the slogan when search results are displayed */
.hero_single.jarallax.has-results #divSlogan {
    display: none;
}
/* Reset inherited text-align on the results area so Bootstrap grid is the sole centering mechanism */
#divSearchResult {
    text-align: left;
}
/* /Hero section expand */

/* ===== Skeleton loading cards ===== */
.skeleton-card-header {
    background: #e0e0e0;
    padding: 20px;
    border-bottom: 2px solid #d0d0d0;
    border-radius: 12px 12px 0 0;
}
.skeleton-line {
    border-radius: 4px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
}
.skeleton-line--header {
    height: 1.1rem;
    width: 40%;
}
.skeleton-line--body-lg {
    height: .9rem;
    width: 70%;
    margin-bottom: .6rem;
}
.skeleton-line--body-sm {
    height: .9rem;
    width: 50%;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Skeleton loading cards */

/* ===== Word-fly animation (search keyword ? Quiz button) ===== */
.word-fly-chip {
    position: absolute;
    z-index: 10001;
    pointer-events: none;
    /* pill style matching the FAB */
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.55);
    /* centre the chip on the start point */
    transform: translate(-50%, -50%);
    animation: word-fly 1.856s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes word-fly {
    0%   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--fly-dx)), calc(-50% + var(--fly-dy))) scale(0.5); opacity: 0; }
}
/* /Word-fly animation */

/* Hide the global floating FAB on the index page (it appears inline instead) */
body.page-index .quiz-fab-wrapper:not(.quiz-fab-wrapper--inline) {
    display: none !important;
}

/* Hide the floating Study FAB on the Study page */
body.page-study .quiz-fab-wrapper {
    display: none !important;
}
/* Search bar row: relative container so the quiz button can be absolutely positioned */
.search-bar-row {
    position: relative;
}
/* Inline variant: remove fixed positioning inherited from the wrapper rules */
.quiz-fab--inline {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
}
/* Inline wrapper: absolutely positioned to the right of the centred search bar */
.quiz-fab-wrapper--inline {
    position: absolute !important;
    top: 50% !important;
    /* sits just to the right of the centred col-md-6 (50% wide) with a 40px gap */
    left: calc(50% + 25% + 40px) !important;
    transform: translateY(-50%);
    right: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
}
.quiz-fab-wrapper--inline .quiz-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 9999;
    margin-top: 0;
}
/* /Floating Quiz Button */

/* ===== Auth FAB (Sign In / Sign Up floating button — mobile only) ===== */
.auth-fab {
    display: none; /* hidden on desktop */
}

@media (max-width: 991px) {
    /* Row that holds both FABs side-by-side */
    .fab-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .auth-fab {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 18px 12px 14px;
        border-radius: 50px;
        background: linear-gradient(135deg, #004dda 0%, #0077ff 100%);
        color: #fff;
        border: none;
        cursor: pointer;
        box-shadow: 0 8px 28px rgba(0, 77, 218, 0.45), 0 2px 8px rgba(0,0,0,0.18);
        transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease;
        white-space: nowrap;
        font-size: 0.88rem;
        font-weight: 600;
        line-height: 1;
    }

    .auth-fab:hover,
    .auth-fab:focus {
        transform: scale(1.07);
        box-shadow: 0 12px 36px rgba(0, 77, 218, 0.55), 0 4px 12px rgba(0,0,0,0.22);
        outline: none;
    }

    .auth-fab:active {
        transform: scale(0.96);
    }

    .auth-fab__icon {
        font-size: 1.1rem;
        display: flex;
        align-items: center;
    }

    .auth-fab__label {
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.01em;
    }
}
/* ===== /Auth FAB ===== */

/* ===== Quiz Panel (hover dropdown below FAB) ===== */
.quiz-fab-wrapper {
    position: fixed;
    z-index: 9999;
    top: 80px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* On mobile the wrapper is fixed to bottom-right and floats while scrolling */
@media (max-width: 991px) {
    .quiz-fab-wrapper {
        top: auto;
        bottom: 24px;
        right: 20px;
        flex-direction: column-reverse; /* panel opens upward */
        align-items: flex-end;
    }

    /* Override the inline variant so it also stays fixed on mobile */
    .quiz-fab-wrapper--inline {
        position: fixed !important;
        top: auto !important;
        bottom: 24px !important;
        right: 20px !important;
        left: auto !important;
        transform: none !important;
        flex-direction: column-reverse !important; /* panel opens upward, fab-row at bottom */
        align-items: flex-end !important;
    }
}

/* The FAB itself is no longer fixed — positioning is delegated to the wrapper */
.quiz-fab {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

.quiz-panel {
    width: 320px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.22), 0 4px 16px rgba(0,0,0,0.12);
    margin-top: 10px;
    overflow: hidden;
    /* hidden state */
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(.4,0,.2,1),
                transform 0.28s cubic-bezier(.4,0,.2,1);
}

@media (max-width: 991px) {
    .quiz-panel {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -46%) !important;
        margin: 0 !important;
        width: calc(100vw - 40px) !important;
        max-width: 360px !important;
        z-index: 10001 !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s cubic-bezier(.4,0,.2,1),
                    transform 0.28s cubic-bezier(.4,0,.2,1);
    }

    .quiz-panel--visible {
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: auto !important;
    }
}

.quiz-panel--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.quiz-panel__header {
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quiz-panel__close {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 22px !important;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: 1 !important;
    visibility: visible !important;
    transition: color 0.15s ease;
    user-select: none;
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
}

.quiz-panel__close:hover {
    color: #fff !important;
}

.quiz-panel__header-icon {
    font-size: 20px;
    color: #fff;
    line-height: 1;
}

.quiz-panel__header h6 {
    margin: 0;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.quiz-panel__body {
    padding: 18px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-panel__loader {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
}

.quiz-panel__error {
    color: #c0392b;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quiz-panel__signin-btn {
    font-size: 13px;
    padding: 8px 20px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    width: 100%;
}

.quiz-panel__langs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.quiz-panel__langs .lang-pill {
    background: #eef0ff;
    color: #667eea;
    padding: 2px 8px;
    border-radius: 10px;
}

.quiz-panel__langs .lang-arrow {
    color: #bbb;
}

.quiz-panel__word {
    display: inline-block;
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 2px;
    letter-spacing: 0.4px;
}

.quiz-panel__question {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #2d2d2d;
    line-height: 1.55;
    margin: 0;
}

.quiz-panel__cue {
    font-size: 12px;
    color: #aaa;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
}

.quiz-panel__reveal-btn {
    align-self: flex-start;
    background: transparent;
    border: 2px solid #667eea;
    color: #667eea;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    margin-top: 4px;
}

.quiz-panel__reveal-btn:hover {
    background: #667eea;
    color: #fff;
}

.quiz-panel__answer {
    background: #f4f6fb;
    border-left: 4px solid #28a745;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #2d2d2d;
    line-height: 1.5;
    /* reveal animation */
    animation: quiz-answer-reveal 0.3s ease forwards;
}

@keyframes quiz-answer-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.quiz-panel__answer-label {
    font-size: 10px;
    font-weight: 700;
    color: #28a745;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}

.quiz-panel__verdict {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.quiz-panel__verdict-btn {
    flex: 1;
    padding: 7px 10px;
    border-radius: 20px;
    border: 2px solid transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.quiz-panel__verdict-btn--correct {
    background: transparent;
    border-color: #28a745;
    color: #28a745;
}

.quiz-panel__verdict-btn--correct:hover {
    background: #28a745;
    color: #fff;
}

.quiz-panel__verdict-btn--incorrect {
    background: transparent;
    border-color: #dc3545;
    color: #dc3545;
}

.quiz-panel__verdict-btn--incorrect:hover {
    background: #dc3545;
    color: #fff;
}

.quiz-panel__verdict-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.quiz-panel__feedback {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 20px;
    text-align: center;
    animation: quiz-answer-reveal 0.25s ease forwards;
}

.quiz-panel__feedback--correct {
    background: #d4edda;
    color: #155724;
}

.quiz-panel__feedback--incorrect {
    background: #f8d7da;
    color: #721c24;
}
/* ===== /Quiz Panel ===== */

/* ===== My Word List ===== */
.wordlist-empty {
    padding: 80px 20px;
}
.wordlist-empty-icon {
    font-size: 72px;
    margin-bottom: 20px;
}
.wordlist-empty h4 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #444;
}

/* Word Card */
.word-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-left: 5px solid #667eea;
}
.word-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.13);
}
.word-card--learned {
    border-left-color: #28a745;
    background: #f8fff9;
}

/* Card Header */
.word-card-header {
    padding: 20px 22px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.word-card-word {
    font-size: 22px;
    font-weight: 700;
    color: #2d2d2d;
    word-break: break-word;
    flex: 1;
}
.word-card-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.badge-new {
    background: #eef0ff;
    color: #667eea;
}
.badge-learned {
    background: #d4edda;
    color: #28a745;
}

/* Card Body */
.word-card-body {
    padding: 16px 22px;
    flex-grow: 1;
}
.word-card-langs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.lang-tag {
    background: #f5f5f5;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}
.lang-arrow {
    color: #999;
    font-size: 14px;
}
.word-card-date {
    font-size: 13px;
    color: #888;
}
.word-card-date i {
    margin-right: 5px;
}
.word-card-date strong {
    color: #555;
}

/* Card Footer */
.word-card-footer {
    padding: 14px 22px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.btn-toggle-learned {
    width: 100%;
    padding: 9px 16px;
    border-radius: 8px;
    border: 2px solid #667eea;
    background: transparent;
    color: #667eea;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.btn-toggle-learned:hover {
    background: #667eea;
    color: #fff;
}
.btn-toggle-learned--on {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
}
.btn-toggle-learned--on:hover {
    background: #218838;
    border-color: #218838;
    color: #fff;
}
.btn-toggle-learned:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* ===== End My Word List ===== */

/* Google-branded sign-in button (follows Google branding guidelines) */
.btn-google-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 10px 16px;
    font-family: 'Google Sans', Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 12px;
    text-decoration: none;
}

.btn-google-signin:hover {
    background-color: #f8f9fa;
    box-shadow: 0 1px 3px rgba(60,64,67,0.3), 0 4px 8px rgba(60,64,67,0.15);
    border-color: #dadce0;
    color: #3c4043;
}

.btn-google-signin:active {
    background-color: #eef0f3;
    box-shadow: none;
}

.btn-google-signin svg {
    flex-shrink: 0;
}

/* Language Selector Styles */
#divLanguages {
    margin-top: 20px;
    margin-bottom: 20px;
}

#divLanguages label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

/* Select2 customization to match the theme */
.select2-container--default .select2-selection--single {
    height: 45px;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 8px 12px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
    color: #333;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 43px;
}

.select2-dropdown {
    border: 1px solid #ddd;
    border-radius: 3px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #e04f67;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 8px;
}

/* Flag icon spacing */
.select2-results__option .fi,
.select2-selection__rendered .fi {
    margin-right: 8px;
}

/* Search Results Cards */
.result-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.result-card-header {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.result-card-header i {
    font-size: 28px;
    line-height: 1;
}

.result-card-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.result-card-body {
    padding: 25px;
    flex-grow: 1;
    background: #fff;
}

/* Translation Card */
.translation-card .result-card-header {
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: white;
    border: none;
}

.translation-card .translation-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.translation-card .translation-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.translation-card .translation-row:first-child {
    padding-top: 0;
}

.translation-card .translation-context {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

.translation-card .translation-text {
    font-size: 15px;
    font-weight: 700;
    color: #667eea;
    margin: 0;
    flex: 1;
}

/* Translation card — ranked list */
.translation-primary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Inline speaker button inside the translation rows */
.translation-speak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #c5bff0;
    background: none;
    color: #667eea;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.translation-speak-btn:hover:not(.study-speak-btn--loading) {
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff;
    border-color: transparent;
    transform: scale(1.1);
}

.translation-speak-btn.study-speak-btn--loading {
    cursor: wait;
    opacity: 0.65;
}

.translation-speak-btn.study-speak-btn--playing {
    color: #667eea;
    animation: speak-pulse-inline 1s ease-in-out infinite;
}

@keyframes speak-pulse-inline {
    0%, 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.3); }
    50%       { box-shadow: 0 0 0 5px rgba(102, 126, 234, 0.08); }
}

/* Search-this-word button inside translation rows */
.translation-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #c5bff0;
    background: none;
    color: #667eea;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.translation-search-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: transparent;
    transform: scale(1.1);
}

.alt-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    background: #e8e6f5;
    color: #667eea;
}

.alt-rank--primary {
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff;
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.translation-alternatives {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
}

.translation-alt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid #f8f8f8;
}

.translation-alt-text {
    flex: 1;
}

.translation-alt:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.translation-alt--new {
    animation: fadeInTranslation 0.3s ease;
}

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

/* Scrollable translation card body */
.translation-card-body {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c5bff0 #f5f5f5;
}

.translation-card-body::-webkit-scrollbar {
    width: 5px;
}

.translation-card-body::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.translation-card-body::-webkit-scrollbar-thumb {
    background: #c5bff0;
    border-radius: 4px;
}

/* Load more button */
.translation-load-more-row {
    display: flex;
    justify-content: center;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed #e8e6f5;
    position: sticky;
    bottom: 0;
    background: #fff;
}

.btn-load-more-translations {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid #c5bff0;
    border-radius: 20px;
    color: #667eea;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-load-more-translations:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff;
    border-color: transparent;
}

.btn-load-more-translations:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Definition Card */
.definition-card .result-card-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border: none;
}

.definition-card .definition-text {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin: 0;
}

/* Examples Card */
.examples-card .result-card-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    border: none;
}

.examples-card .examples-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.examples-card .examples-list li {
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
    color: #333;
    position: relative;
    padding-left: 25px;
}

.examples-card .examples-list li:last-child {
    border-bottom: none;
}

.examples-card .examples-list li:before {
    content: "?";
    position: absolute;
    left: 0;
    color: #4facfe;
    font-weight: bold;
}

/* Synonyms Card */
.synonyms-card .result-card-header {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    border: none;
}

.synonyms-card .synonyms-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.synonyms-card .synonym-tag {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(250, 112, 154, 0.3);
    user-select: none;
}

.synonyms-card .synonym-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(250, 112, 154, 0.5);
}

.synonym-tag__search-icon {
    font-size: 12px;
    opacity: 0.85;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .translation-card .translation-text {
        font-size: 17px;
    }
    
    .result-card-body {
        padding: 20px;
    }
    
    .result-card-header {
        padding: 15px;
    }
}

/* =====================================================================
   My Word List — row-based CSS data grid
   ===================================================================== */

/* Page wrapper */
.wl-section {
    padding: 48px 0 72px;
    background: #f4f6fb;
    min-height: 70vh;
}

/* ?? Page header ????????????????????????????????????????????????????? */
.wl-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}
.wl-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wl-page-icon { font-size: 30px; line-height: 1; }
.wl-page-title h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #2d2d2d;
}

/* Summary pills */
.wl-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.wl-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.15s, opacity 0.15s, transform 0.15s;
    user-select: none;
}
.wl-summary-pill:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}
.wl-snum { font-size: 15px; font-weight: 700; }
.wl-summary-pill--total    { background: #eef0ff; color: #5563d6; }
.wl-summary-pill--learned  { background: #e6fff4; color: #1e9e5e; }
.wl-summary-pill--progress { background: #fff4e5; color: #c77b00; }

.wl-summary-pill--total.wl-summary-pill--active    { box-shadow: 0 0 0 2px #5563d6; }
.wl-summary-pill--learned.wl-summary-pill--active  { box-shadow: 0 0 0 2px #1e9e5e; }
.wl-summary-pill--progress.wl-summary-pill--active { box-shadow: 0 0 0 2px #c77b00; }

/* ?? Empty state ????????????????????????????????????????????????????? */
.wl-empty {
    text-align: center;
    padding: 80px 20px;
}
.wl-empty-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 18px;
}
.wl-empty h4 {
    font-size: 22px;
    font-weight: 700;
    color: #444;
    margin-bottom: 8px;
}
.wl-empty p { color: #888; margin-bottom: 24px; }

/* ?? Data grid ??????????????????????????????????????????????????????? */
.wl-datagrid-wrapper {
    position: relative;
    overflow: visible;
}

/* Quiz FAB on MyWordList: fixed top-right, stays visible while scrolling */
body.page-mywordlist .quiz-fab-wrapper {
    position: fixed;
    top: 80px;
    right: 24px;
    left: auto;
    bottom: auto;
    transform: none;
    z-index: 9999;
}

body.page-mywordlist .quiz-fab-wrapper .quiz-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 9999;
}

@media (max-width: 991px) {
    body.page-mywordlist .quiz-fab-wrapper {
        position: fixed;
        top: auto;
        bottom: 24px;
        right: 20px;
    }
}

.wl-datagrid {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

/* 5-column track — shared by header + every data row */
.wl-datagrid-head,
.wl-datagrid-row {
    display: grid;
    grid-template-columns: 180px 1fr 220px 150px 260px;
    align-items: center;
}

/* ?? Header row ?????????????????????????????????????????????????????? */
.wl-datagrid-head {
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
}
.wl-datagrid-head .wl-col {
    padding: 14px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.9);
}

/* ?? Data rows ??????????????????????????????????????????????????????? */
.wl-datagrid-row {
    border-bottom: 1px solid #f0f2f8;
    transition: background 0.18s ease;
}
.wl-datagrid-row:last-child { border-bottom: none; }
.wl-datagrid-row:hover      { background: #f8f9ff; }

.wl-datagrid-row.wl-row--learned       { background: #f5fffb; }
.wl-datagrid-row.wl-row--learned:hover { background: #edfff6; }

/* Cell base */
.wl-col {
    padding: 16px 18px;
    font-size: 14px;
    color: #333;
    min-width: 0;
}

/* ?? Word column ????????????????????????????????????????????????????? */
.wl-col--word {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wl-word-text {
    font-size: 16px;
    font-weight: 700;
    color: #2d2d2d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wl-status-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.wl-dot--new     { background: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,.18); }
.wl-dot--learned { background: #27ae60; box-shadow: 0 0 0 3px rgba( 39,174, 96,.18); }

/* ?? Translation column ?????????????????????????????????????????????? */
.wl-col--translation { color: #555; }
.wl-translation-val {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* ?? Language chips ?????????????????????????????????????????????????? */
.wl-col--langs {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.wl-chip {
    padding: 3px 11px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.wl-chip--src { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.wl-chip--tgt { background: linear-gradient(135deg, #f093fb, #f5576c); color: #fff; }
.wl-chip-arrow { color: #bbb; font-size: 14px; font-weight: 700; }

/* ?? Date column ????????????????????????????????????????????????????? */
.wl-col--date {
    color: #888;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.wl-col--date i { color: #bbb; font-size: 15px; flex-shrink: 0; }

/* ?? Toggle button ??????????????????????????????????????????????????? */
.wl-col--action { padding-right: 20px; }
.wl-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #667eea;
    background: #fff;
    color: #667eea;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
}
.wl-toggle i { font-size: 12px; line-height: 1; }
.wl-toggle:hover {
    background: #667eea;
    color: #fff;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.35);
}
.wl-toggle--learned {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    border-color: transparent;
    color: #fff;
}
.wl-toggle--learned:hover {
    background: linear-gradient(135deg, #38d96a, #2de8c5);
    box-shadow: 0 3px 10px rgba(67, 233, 123, 0.4);
    color: #fff;
}
.wl-toggle:disabled { opacity: 0.55; cursor: not-allowed; }

/* Action group — holds study, toggle and delete side by side */
.wl-action-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

/* Study button */
.wl-study {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #f093fb;
    background: #fff;
    color: #c026d3;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
}
.wl-study i { font-size: 12px; line-height: 1; }

/* Filled state — word not yet learned */
.wl-study {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 6px rgba(240, 147, 251, 0.35);
}

/* Outline state — word already learned */
.wl-row--learned .wl-study {
    background: #fff;
    border-color: #f093fb;
    color: #c026d3;
    box-shadow: none;
}

.wl-study:hover {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(240, 147, 251, 0.45);
}
.wl-study:disabled { opacity: 0.55; cursor: not-allowed; }

/* Delete (trash) button */
.wl-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #fca5a5;
    background: #fff;
    color: #ef4444;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.15s ease;
}
.wl-delete:hover {
    background: #ef4444;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
    transform: scale(1.1);
}
.wl-delete:active  { transform: scale(0.95); }
.wl-delete:disabled { opacity: 0.55; cursor: not-allowed; }

/* ?? Responsive ?????????????????????????????????????????????????????? */
@media (max-width: 900px) {
    .wl-datagrid-head,
    .wl-datagrid-row {
        grid-template-columns: 140px 1fr 160px 130px 230px;
    }
}

@media (max-width: 680px) {
    .wl-datagrid-head { display: none; }
    .wl-datagrid-row {
        grid-template-columns: 1fr 1fr;
        padding: 14px 0;
        border-bottom: 2px solid #f0f2f8;
    }
    .wl-col                { padding: 6px 16px; }
    .wl-col--word          { grid-column: 1 / -1; padding-bottom: 8px; }
    .wl-col--translation   { grid-column: 1 / -1; }
    .wl-col--action        { grid-column: 1 / -1; padding-top: 8px; }
    .wl-action-group        { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   Study Page
   ===================================================================== */

/* Hero */
.study-hero {
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    padding: 40px 0 48px;
    color: #fff;
}
.study-back-link {
    position: fixed;
    top: 80px;
    left: 24px;
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 50px;
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(200, 29, 119, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.study-back-link:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 29, 119, 0.45);
}
.study-hero-content { text-align: center; }
.study-hero-word {
    font-family: 'Poppins', sans-serif;
    font-size: 48px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}
.study-hero-translation {
    font-size: 20px;
    font-weight: 400;
    opacity: 0.85;
    margin: 0 0 14px;
}
.study-hero-langs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.study-hero-langs .lang-pill {
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.study-hero-langs .lang-arrow {
    color: rgba(255,255,255,0.6);
    font-size: 16px;
}

/* Section */
.study-section {
    padding: 40px 0 80px;
    background: #f4f6fb;
}

/* Card overrides */
.study-card {
    height: 100%;
}

/* Card header gradients */
.etymology-card .result-card-header {
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff; border: none;
}
.translation-quiz-card .result-card-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff; border: none;
}
.synant-card .result-card-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff; border: none;
}
.idiom-card .result-card-header {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #fff; border: none;
}
.truefalse-card .result-card-header {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #fff; border: none;
}
.youglish-card .result-card-header {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: #fff; border: none;
}
.usage-card .result-card-header {
    background: linear-gradient(135deg, #667eea 0%, #38495a 100%);
    color: #fff; border: none;
}
.pronunciation-card .result-card-header {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff; border: none;
}

/* Pronunciation */
.study-pronunciation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 8px 0;
}
.study-ipa-word {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #2d2d2d;
    letter-spacing: 0.5px;
}
.study-ipa-badge {
    display: inline-block;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 22px;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 30px;
    letter-spacing: 2px;
    box-shadow: 0 4px 14px rgba(17, 153, 142, 0.35);
}
.study-ipa-guide {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin: 0;
    max-width: 360px;
}

/* Speaker Button */
.study-speak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(17, 153, 142, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 4px;
}
.study-speak-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(17, 153, 142, 0.55);
}
.study-speak-btn:active {
    transform: scale(0.96);
}
.study-speak-btn--playing {
    animation: speak-pulse 1s ease-in-out infinite;
}
.study-speak-btn--loading {
    cursor: wait;
    opacity: 0.75;
}
@keyframes speak-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(17, 153, 142, 0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(17, 153, 142, 0.15); }
}
.study-speak-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: speak-spin 0.7s linear infinite;
}
@keyframes speak-spin {
    to { transform: rotate(360deg); }
}

/* Loader */
.study-loader {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
}

/* Error */
.study-error {
    color: #c0392b;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Etymology */
.study-etymology-text {
    font-size: 15px;
    line-height: 1.75;
    color: #333;
    margin: 0;
}

/* ?? Translation Quiz (inline) ?? */
.study-quiz-langs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}
.study-quiz-langs .lang-pill {
    background: #eef0ff;
    color: #667eea;
    padding: 2px 8px;
    border-radius: 10px;
}
.study-quiz-langs .lang-arrow { color: #bbb; }
.study-quiz-word {
    display: inline-block;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.study-quiz-sentence {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2d2d2d;
    line-height: 1.55;
    margin: 0 0 6px;
}
.study-quiz-cue {
    display: block;
    font-size: 12px;
    color: #aaa;
    font-style: italic;
    margin-bottom: 10px;
}
.study-quiz-reveal-btn {
    background: transparent;
    border: 2px solid #4facfe;
    color: #4facfe;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.study-quiz-reveal-btn:hover { background: #4facfe; color: #fff; }
.study-quiz-answer {
    background: #f4f6fb;
    border-left: 4px solid #28a745;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #2d2d2d;
    line-height: 1.5;
    margin-bottom: 10px;
    animation: quiz-answer-reveal 0.3s ease forwards;
}
.study-quiz-answer-label {
    font-size: 10px; font-weight: 700; color: #28a745;
    text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px;
}
.study-quiz-verdict {
    display: flex;
    gap: 8px;
}
.study-quiz-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 20px;
    border: 2px solid transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.18s ease, color 0.18s ease;
}
.study-quiz-btn--correct  { border-color: #28a745; color: #28a745; background: #fff; }
.study-quiz-btn--correct:hover  { background: #28a745; color: #fff; }
.study-quiz-btn--incorrect { border-color: #dc3545; color: #dc3545; background: #fff; }
.study-quiz-btn--incorrect:hover { background: #dc3545; color: #fff; }
.study-quiz-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Feedback pill (shared) */
.study-feedback {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 20px;
    text-align: center;
    animation: quiz-answer-reveal 0.25s ease forwards;
}
.study-feedback--correct  { background: #d4edda; color: #155724; }
.study-feedback--incorrect { background: #f8d7da; color: #721c24; }

/* Another One button */
.study-quiz-another-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    width: 100%;
    padding: 9px 16px;
    border-radius: 20px;
    border: 2px solid #4facfe;
    background: transparent;
    color: #4facfe;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.study-quiz-another-btn:hover {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
}

/* ?? Synonyms & Antonyms ?? */
.study-tag-group { margin-bottom: 16px; }
.study-tag-group:last-child { margin-bottom: 0; }
.study-tag-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    margin-bottom: 8px;
}
.study-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.study-tag {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.study-tag:hover { transform: scale(1.05); }
.study-tag--syn {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
}
.study-tag--ant {
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff;
}

/* ?? Idiom ?? */
.study-idiom-phrase {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #e67e22;
    margin: 0 0 10px;
}
.study-idiom-meaning,
.study-idiom-example {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 6px;
}

/* ?? True / False ?? */
.study-tf-statement {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2d2d2d;
    line-height: 1.55;
    margin: 0 0 14px;
}
.study-tf-buttons { display: flex; gap: 10px; }
.study-tf-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 2px solid transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.study-tf-btn--true {
    border-color: #28a745; color: #28a745; background: #fff;
}
.study-tf-btn--true:hover {
    background: #28a745; color: #fff; box-shadow: 0 3px 12px rgba(40,167,69,0.35);
}
.study-tf-btn--false {
    border-color: #dc3545; color: #dc3545; background: #fff;
}
.study-tf-btn--false:hover {
    background: #dc3545; color: #fff; box-shadow: 0 3px 12px rgba(220,53,69,0.35);
}
.study-tf-explanation {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin-top: 10px;
}

/* ?? YouGlish ?? */
#yg-widget { min-height: 200px; }

/* ?? Usage Scenarios ?? */
.study-scenarios { display: flex; flex-direction: column; gap: 14px; }
.study-scenario {
    background: #f9fafe;
    border-left: 4px solid #667eea;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    transition: transform 0.2s ease;
}
.study-scenario:hover { transform: translateX(4px); }
.study-scenario-ctx {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #38495a 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.study-scenario-sentence {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .study-hero-word { font-size: 32px; }
    .study-hero-translation { font-size: 16px; }
    .study-tf-buttons { flex-direction: column; }
    .study-quiz-verdict { flex-direction: column; }
}

/* =====================================================================
   Blog Pages
   ===================================================================== */

/* ?? Shared section wrapper ?? */
.blog-section,
.blog-post-section {
    padding: 48px 0 72px;
    background: #f4f6fb;
    min-height: 70vh;
}

/* ?? Page header ?? */
.blog-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}

.blog-page-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.blog-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s;
}

.blog-admin-link:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #fff;
}

.blog-page-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #2d2d2d;
    margin: 0 0 4px;
}

.blog-lang-label {
    font-size: 13px;
    color: #888;
    margin: 0;
}

/* ?? Category pills ?? */
.blog-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.blog-cat-pill {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #c5bff0;
    color: #667eea;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.blog-cat-pill:hover,
.blog-cat-pill--active {
    background: linear-gradient(135deg, #ff5f6d 0%, #c81d77 100%);
    color: #fff;
    border-color: transparent;
}

/* ?? Blog post grid ?? */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

/* ?? Blog card ?? */
.blog-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}

.blog-card:hover {
    box-shadow: 0 8px 28px rgba(102,126,234,0.15);
    transform: translateY(-3px);
}

.blog-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-cat {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    background: #eef0ff;
    color: #5563d6;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.blog-card-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.4;
}

.blog-card-title a {
    color: #2d2d2d;
    text-decoration: none;
}

.blog-card-title a:hover { color: #667eea; }

.blog-card-subtitle {
    font-size: 13px;
    color: #667eea;
    font-weight: 600;
    margin: 0 0 8px;
}

.blog-card-excerpt {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    flex: 1;
    margin: 0 0 16px;
}

.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #aaa;
}

.blog-card-read-more {
    font-size: 12px;
    font-weight: 600;
    color: #667eea;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blog-card-read-more:hover { color: #764ba2; }

/* ?? Empty state ?? */
.blog-empty {
    text-align: center;
    padding: 80px 20px;
    color: #888;
}

.blog-empty-icon {
    font-size: 52px;
    color: #c5bff0;
    margin-bottom: 16px;
}

.blog-empty h4 { color: #555; margin-bottom: 8px; }

/* ?? Post detail ?? */
.blog-post-wrapper {
    max-width: 780px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    padding: 48px 56px;
}

.blog-post-meta-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
    text-decoration: none;
}

.blog-back-link:hover { color: #764ba2; }

.blog-post-title {
    font-size: 32px;
    font-weight: 800;
    color: #1e1e2e;
    line-height: 1.3;
    margin: 0 0 10px;
}

.blog-post-subtitle {
    font-size: 16px;
    color: #667eea;
    font-weight: 600;
    margin: 0 0 16px;
}

.blog-post-info {
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.blog-post-body {
    font-size: 15px;
    line-height: 1.85;
    color: #333;
}

.blog-post-body h1, .blog-post-body h2, .blog-post-body h3 {
    color: #1e1e2e;
    font-weight: 700;
    margin-top: 28px;
}

.blog-post-body p { margin-bottom: 16px; }

.blog-post-body a { color: #667eea; }

.blog-post-body blockquote {
    border-left: 4px solid #667eea;
    margin: 20px 0;
    padding: 12px 20px;
    background: #f5f6ff;
    border-radius: 0 8px 8px 0;
    color: #555;
    font-style: italic;
}

.blog-post-footer-nav {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

/* ?? Admin grid ?? */
.blog-admin-grid-head,
.blog-admin-grid-row {
    grid-template-columns: 2fr 1fr 1fr 100px 110px 160px !important;
}

.blog-status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blog-status-pill--published { background: #e6fff4; color: #1e9e5e; }
.blog-status-pill--draft     { background: #fff4e5; color: #c77b00; }

/* ?? Admin form ?? */
.blog-admin-form {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    padding: 36px 40px;
    max-width: 900px;
}

.blog-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.blog-form-group--grow { flex: 1; }

.blog-form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.blog-form-label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-quill-editor {
    min-height: 260px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    font-size: 15px;
}

.blog-slug-gen-btn {
    background: none;
    border: 1px solid #c5bff0;
    border-radius: 6px;
    color: #667eea;
    font-size: 12px;
    padding: 1px 7px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.blog-slug-gen-btn:hover {
    background: #667eea;
    color: #fff;
    border-color: transparent;
}

.blog-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.btn_1--outline {
    background: transparent !important;
    border: 2px solid #667eea !important;
    color: #667eea !important;
    box-shadow: none !important;
}

.btn_1--outline:hover {
    background: #667eea !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    .blog-post-wrapper { padding: 28px 20px; }
    .blog-post-title   { font-size: 24px; }
    .blog-admin-form   { padding: 24px 16px; }
    .blog-form-row     { flex-direction: column; }
    .blog-admin-grid-head,
    .blog-admin-grid-row { grid-template-columns: 1fr 1fr auto !important; }
}

/* =============================================================
   ABOUT US PAGE
   ============================================================= */

/* --- Hero --- */
.about-hero {
    background: linear-gradient(135deg, #667eea 0%, #004dda 100%);
    padding: 56px 0 64px;
    color: #fff;
    text-align: center;
}
.about-hero-content {
    max-width: 760px;
    margin: 0 auto;
}
.about-hero-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.9;
}
.about-hero-title {
    font-family: 'Poppins', sans-serif;
    font-size: 48px;
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
}
.about-hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.85;
    margin: 0 0 32px;
}

/* --- Language Selector --- */
.about-lang-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.about-lang-label {
    font-size: 20px;
    opacity: 0.8;
}
.about-lang-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.about-lang-pill {
    background: rgba(255,255,255,0.15);
    color: #fff;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.15s ease;
    border: 1px solid rgba(255,255,255,0.25);
}
.about-lang-pill:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
    transform: translateY(-2px);
}
.about-lang-pill--active {
    background: #fff;
    color: #004dda;
    font-weight: 700;
    border-color: #fff;
}
.about-lang-pill--active:hover {
    background: #f0f4ff;
    color: #004dda;
}
.about-lang-more-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    padding: 5px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.18s ease;
    margin-top: 4px;
}
.about-lang-more-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* --- Content Section --- */
.about-section {
    padding: 48px 0 80px;
    background: #f4f6fb;
}

/* --- About Cards --- */
.about-card {
    height: 100%;
}
.mission-about-card .result-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
}
.story-about-card .result-card-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
    border: none;
}
.values-about-card .result-card-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    border: none;
}
.team-about-card .result-card-header {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #fff;
    border: none;
}
.about-card-text {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    margin: 0;
}

/* --- Value Items --- */
.about-value-item {
    text-align: center;
    padding: 20px 12px;
    border-radius: 12px;
    background: #f8f9ff;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.about-value-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
}
.about-value-icon {
    font-size: 32px;
    margin-bottom: 10px;
    color: #667eea;
}
.about-value-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #2d2d2d;
    margin-bottom: 6px;
}
.about-value-text {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* --- Team Avatars --- */
.about-team-avatars {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}
.about-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.about-avatar span {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
.about-avatar-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}
.about-avatar-circle:hover {
    transform: scale(1.08);
}
.about-avatar--blue   { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.about-avatar--purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.about-avatar--pink   { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.about-avatar--green  { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }

/* --- CTA Section --- */
.about-cta-section {
    padding: 0 0 60px;
    background: #f4f6fb;
}
.about-cta-box {
    background: linear-gradient(135deg, #667eea 0%, #004dda 100%);
    border-radius: 20px;
    padding: 48px 32px;
    text-align: center;
    color: #fff;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.35);
}
.about-cta-title {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 24px;
}
.about-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #004dda;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.about-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    color: #004dda;
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .about-hero-title { font-size: 32px; }
    .about-hero-subtitle { font-size: 15px; }
    .about-cta-title { font-size: 20px; }
    .about-lang-pill { font-size: 12px; padding: 4px 10px; }
}
/* ============================================================= */

/* =============================================================
   CONTACT PAGE
   ============================================================= */

/* --- Hero --- */
.contact-hero {
    background: linear-gradient(135deg, #11998e 0%, #004dda 100%);
    padding: 56px 0 64px;
    color: #fff;
    text-align: center;
}
.contact-hero-content {
    max-width: 620px;
    margin: 0 auto;
}
.contact-hero-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.9;
}
.contact-hero-title {
    font-family: 'Poppins', sans-serif;
    font-size: 48px;
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
}
.contact-hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.85;
    margin: 0;
}

/* --- Section --- */
.contact-section {
    padding: 48px 0 80px;
    background: #f4f6fb;
}

/* --- Card --- */
.contact-card-header {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    border: none;
}
.contact-card-body {
    padding: 32px;
}

/* --- Form --- */
.contact-form-group {
    margin-bottom: 22px;
}
.contact-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 7px;
}
.contact-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #dde1ef;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    background: #fafbff;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    font-family: 'Poppins', sans-serif;
}
.contact-input:focus {
    border-color: #11998e;
    box-shadow: 0 0 0 3px rgba(17, 153, 142, 0.12);
    background: #fff;
}
.contact-input[readonly] {
    background: #f0f4ff;
    color: #555;
    cursor: default;
}
.contact-textarea {
    resize: vertical;
    min-height: 140px;
}
.contact-validation {
    display: block;
    font-size: 12px;
    color: #e53935;
    margin-top: 4px;
}
.contact-hint {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

/* --- reCAPTCHA note --- */
.contact-recaptcha-note {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 20px;
}
.contact-recaptcha-note a {
    color: #aaa;
    text-decoration: underline;
}

/* --- Submit button --- */
.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(17, 153, 142, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(17, 153, 142, 0.45);
}
.contact-submit-btn:disabled {
    opacity: 0.75;
    cursor: wait;
}

/* --- Alert --- */
.contact-alert {
    border-radius: 10px;
    font-size: 14px;
}

/* --- Info Cards --- */
.contact-info-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.contact-info-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}
.contact-info-icon--blue  { background: linear-gradient(135deg, #667eea 0%, #004dda 100%); }
.contact-info-icon--green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.contact-info-label {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.contact-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-top: 2px;
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .contact-hero-title  { font-size: 32px; }
    .contact-hero-subtitle { font-size: 15px; }
    .contact-card-body   { padding: 20px 16px; }
}
/* ============================================================= */