/* /public/css/flashcards.css */

.container {
    text-align: center;
    margin-top: 63px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: unset !important;
}

html,
body {
    min-height: 100vh;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html,
#root {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
}

.site-footer,
#footer {
    margin-top: 0 !important;
    flex-shrink: 0;
    position: relative;
}

.header-bar {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}

.align-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.select-container {
    flex-shrink: 0;
    margin: 5px 0;
}

.dropdown-menu-parent {
    flex-shrink: 0;
    position: relative;
    display: inline-block;
}

/* Settings BTN (icon, small, square) */
.settings-btn {
    background: none;
    border: none;
    padding: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.18s;
    position: relative;
}
.settings-btn:hover {
    background: #222;
}
.settings-btn img {
    width: 22px;
    height: 22px;
    display: block;
    filter: invert(1);
    pointer-events: none;
}

/* Tooltip */
.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    background-color: #555;
    color: white;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 16px;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 10;
}
.select-container:hover .tooltip,
#topic-search-input:focus ~ .tooltip,
#topic-search-input:focus + button ~ .tooltip,
#topic-search-input:focus-visible ~ .tooltip {
    opacity: 1 !important;
    color: white;
    background-color: #555;
    pointer-events: auto;
}

select {
    padding: 10px;
    border-radius: 8px;
    background: linear-gradient(120deg, #22242a 70%, #34374a 100%);
    color: #eaf6ff;
    border: 1.5px solid #3d4157;
    font-size: 16px;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    transition:
        background 0.18s,
        border 0.17s,
        color 0.17s;
}
select:focus {
    outline: 2px solid #49a9fe;
    background: #292b36;
    color: #fff;
}

.flashcard {
    perspective: 1000px;
    height: 480px;
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
}

.select-tooltip-container {
    position: relative;
    display: inline-block;
}

.select-tooltip-container::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #777;
    color: white;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 14px;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 10;
}

.select-tooltip-container:hover::after {
    opacity: 1;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    background: linear-gradient(133deg, #2c2c2f 38%, #212227 100%);
    border-radius: 25px;
    box-shadow:
        0 6px 24px 0 #15172044,
        0 0.5px 8px #15172033;
    border: 4px solid #444652;
    transition:
        transform 0.6s,
        border-color 0.23s;
    transform-style: preserve-3d; /* <-- required for 3D flip to work */
}
.card:hover {
    border-color: #aee8ff;
    box-shadow:
        0 8px 32px 0 #1a294a55,
        0 0.5px 8px #61cafa66;
}

.card.show-back {
    transform: rotateY(180deg);
}

.card.slide-next,
.card.slide-prev {
    transition: none;
}
.card.sliding {
    transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    z-index: 2;
}
.card.slide-next {
    transform: translateX(100%) scale(0.98) rotateZ(3deg);
}
.card.slide-prev {
    transform: translateX(-100%) scale(0.98) rotateZ(-3deg);
}
.card.active {
    transition: transform 0.6s;
    transform: translateX(0) scale(1) rotateZ(0);
}

.side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px; /* Match .card */
    padding: 10px;
    box-sizing: border-box;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
}

.card.show-back .front,
.card:not(.show-back) .back {
    pointer-events: none;
}

.card .front,
.card .back {
    transition: z-index 0s linear 0.6s; /* sync to flip anim, ensures z-index change after flip */
}
/* When showing the back, bring .back above and make .front untouchable */
.card.show-back .front {
    z-index: 1;
    pointer-events: none;
}
/* When showing the front, bring .front above and make .back untouchable */
.card:not(.show-back) .back {
    z-index: 1;
    pointer-events: none;
}
/* Make visible side always on top and interactive */
.card.show-back .back,
.card:not(.show-back) .front {
    z-index: 2;
    pointer-events: auto;
}

.star-btn.starred {
    color: #ffd700 !important;
    text-shadow: 0 0 5px #ccbf00;
}

.images {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.main-text,
.extra-text {
    max-width: 96%;
    width: 96%;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap !important;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    cursor: text !important;
}

.front {
    background: var(--front-bg, #555);
}

.back {
    background: var(--back-bg, #666);
    transform: rotateY(180deg);
}

.button-container {
    /*5 btm buttons*/
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-left: 5px;
}

/* ADD or CHANGE this only */
.hint-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-button {
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #444;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    transition: background-color 0.3s;
}

.arrow-button:hover {
    background-color: #555;
}

.arrow-button:active {
    background-color: #747474;
}

.flip-button,
.arrow-button {
    position: relative;
    padding: 10px 20px;
    background-color: #444;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin: 0 5px;
}

.flip-button:hover,
.arrow-button:hover {
    background-color: #555;
}

.flip-button:active,
.arrow-button:active {
    background-color: #747474;
}

.button-container,
#fullscreen-buttons {
    position: relative !important;
    z-index: 1 !important;
}
.button-container button,
#fullscreen-buttons button {
    position: relative !important;
    z-index: 2 !important;
}
.button-container button::after,
#fullscreen-buttons button::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    background-color: #777;
    color: white;
    border-radius: 5px;
    font-size: 14px;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 10000000 !important;
}

.button-container button:hover::after,
#fullscreen-buttons button:hover::after {
    opacity: 1;
}

#fullscreen-buttons button::after {
    z-index: 1000021 !important;
}

.button-container button:hover::after {
    opacity: 1;
}

#topic-dropdown option {
    color: #000 !important;
    background: #fff !important;
}

@media only screen and (max-width: 768px) {
    .container {
        margin-right: 15px;
    }
    .flashcard {
        width: 90%;
        aspect-ratio: 5 / 3;
        height: auto;
    }

    .main-text,
    .extra-text {
        font-size: 12px;
    }
    select,
    .flip-button,
    .arrow-button {
        font-size: 14px;
        padding: 8px 16px;
    }
    .tooltip {
        font-size: 12px;
    }

    .settings-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }
    .settings-btn img {
        width: 18px;
        height: 18px;
    }
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #444;
    border-radius: 8px;
    min-width: 250px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 1;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 10px;
}

.dropdown-content.show {
    display: block;
}

#flashcard-dropdown > div {
    color: rgb(0, 0, 0);
    padding: 10px 16px;
    text-align: center;
    transition: background-color 0.3s;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

#flashcard-dropdown > div:hover {
    background-color: #555;
}

.word-box {
    display: block;
    max-width: 95%;
    margin-left: 20px;
    max-height: 100px;
    overflow-x: auto;
    overflow-y: auto;
    white-space: pre-line;
    word-break: break-word;
    padding: 3px 0;
    text-align: center;
}
.learned-button {
    padding: 5px 10px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 3px;
}

.learned-button:hover {
    background-color: #45a049;
}

.dropdown-toggle {
    padding: 10px 20px;
    background-color: #444;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: center;
    width: 100px;
    max-width: 100px; /*Terms width*/
}
.dropdown-toggle:hover {
    background-color: #333;
}

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    background-color: #777;
    color: white;
    border-radius: 5px;
    font-size: 14px;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 1;
    padding: 5px 8px;
}

.button-container button,
.hint-button,
.arrow-button,
.flip-button,
.dropdown-toggle,
#swap-word-def-btn,
.learned-button {
    background: linear-gradient(135deg, #35363a 0%, #222328 100%);
    border: 1.5px solid #45474f;
    color: #eff3fa;
    border-radius: 9px;
    font-size: 16px;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(40, 43, 50, 0.09);
    transition:
        background 0.24s,
        border 0.17s,
        color 0.17s;
    position: relative;
}
.button-container button:hover,
.hint-button:hover,
.arrow-button:hover,
.flip-button:hover,
.dropdown-toggle:hover,
#swap-word-def-btn:hover,
.learned-button:hover {
    background: linear-gradient(135deg, #484851 0%, #2a2e33 100%);
    color: #fff;
    border: 1.5px solid #627095;
}
.button-container button:active,
.hint-button:active,
.arrow-button:active,
.flip-button:active,
.dropdown-toggle:active,
#swap-word-def-btn:active,
.learned-button:active {
    background: linear-gradient(135deg, #262735 30%, #15171e 100%);
    border: 1.7px solid #7287ce;
    color: #cbe6ff;
}
.learned-button {
    background: linear-gradient(135deg, #3e484b 0%, #1d2a2b 100%);
    border: 1.7px solid #355e4f;
    color: #e8ffdc;
    box-shadow: 0 1px 4px #194a3a18;
}
.learned-button.learned {
    background: linear-gradient(90deg, #2756a9, #396be9 80%);
    color: #fff;
    border: 1.7px solid #55aaff;
}
.learned-button.learned:hover {
    background: linear-gradient(90deg, #2a4c6b, #4179ed 90%);
    color: #fffde4;
    border: 1.7px solid #6cc0fa;
}
.has-tooltip:hover::after {
    opacity: 1;
}

/* Hint btn */
.hint-container {
    margin-top: 0px;
}

.hint-button {
    padding: 10px 20px;
    background-color: #444;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s;
    width: 100px; /*Hint width*/
    max-width: 100px;
}

.hint-button:hover {
    background-color: #555;
}

.hint-text {
    padding: 10px;
    background: linear-gradient(120deg, #232639 84%, #232439 100%) !important;
    color: #ebf5fd;
    border-radius: 8px;
    border: 1.5px solid #343d53;
    margin-top: 5px;
    text-align: center;
    width: 220px;
    max-width: 90vw;
    box-shadow: 0 3px 14px #15172033;
    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

#settings-dropdown.dropdown-content {
    left: auto;
    right: 0;
    transform: none;
    min-width: 220px;
    padding: 18px 18px 14px 18px;
    box-sizing: border-box;
    text-align: left;
}

#settings-dropdown label {
    display: block;
    margin-bottom: 3px;
    margin-left: 3px;
    font-size: 15px;
}
#settings-dropdown select {
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
}
#settings-dropdown > div {
    margin-bottom: 0px !important;
}

.settings-dropdown-nice {
    background: linear-gradient(120deg, #212436 80%, #2a2b41 100%) !important;
    color: #e8eef7 !important;
    box-shadow:
        0 8px 24px rgba(30, 40, 60, 0.33),
        0 1.5px 8px rgba(0, 0, 0, 0.25);
    padding: 30px 40px !important;
    min-width: 300px !important;
    max-width: 98vw !important;
    border-radius: 18px !important;
    border: 1.5px solid #343a40 !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
}

.settings-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
    letter-spacing: 1px;
    color: #ededed;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
}

.settings-dropdown-nice .settings-row {
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
    justify-content: space-between;
}

.settings-dropdown-nice label {
    font-size: 16px;
    color: #fff !important;
    min-width: 82px;
    margin: 0;
}

.settings-dropdown-nice select {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    background: linear-gradient(120deg, #25253a 80%, #383b42 100%) !important;
    color: #d8eaff !important;
    border: 1.5px solid #374255 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    padding: 9px 12px !important;
    margin-bottom: 0 !important;
}
.settings-dropdown-nice option {
    background: #23253a !important;
    color: #cedaea;
}

@media (max-width: 1100px) {
    .settings-dropdown-nice {
        position: fixed !important;
        top: 70px !important;
        left: 50% !important;
        right: auto !important;
        margin: 0 !important;
        min-width: 70vw !important;
        max-width: 70vw !important;
        border-radius: 0 0 16px 16px !important;
        box-sizing: border-box !important;
        z-index: 99999 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        transform: translateX(-50%) !important;
        border-radius: 16px 16px 16px 16px !important;
    }
    .settings-dropdown-nice select {
        width: 95%;
    }
    .settings-title {
        font-size: 17px;
    }
}

/*Terms*/

#flashcard-dropdown.dropdown-content {
    background: #232429 !important;
    color: #fff !important;
    border-radius: 14px !important;
    border: 1.5px solid #343a40 !important;
    box-shadow:
        0 8px 24px rgba(30, 40, 60, 0.26),
        0 1.5px 8px rgba(0, 0, 0, 0.18) !important;
    padding: 18px 30px 20px 30px !important;
    min-width: 320px !important;
    max-width: 500px;
    z-index: 99999 !important;

    max-height: 420px;
    overflow-y: auto;
    top: -240px !important;
    left: 100px !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
}

@media (min-width: 800px) {
    #flashcard-dropdown.dropdown-content {
        left: 350px !important;
    }
}

#flashcard-dropdown > div {
    background: #232429;
    color: #fafafa;
    border-radius: 7px;
    font-size: 18px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
    transition:
        background 0.2s,
        color 0.2s;
}

#flashcard-dropdown > div:hover {
    background: #303244;
    color: #fff;
}

#flashcard-dropdown {
    overscroll-behavior: contain;
}

.learned-button {
    padding: 6px 13px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.23s;
    margin-top: 6px;
    font-size: 15px;
}

.learned-button:hover {
    background-color: #388e3c;
}

/*Card btns*/

.card-corner-btns {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    pointer-events: none;
    z-index: 2;
    padding: 0 10px;
    box-sizing: border-box;
}
.speaker-btn img {
    width: 22px !important;
    height: 22px !important;
    max-width: 95%;
    max-height: 95%;
    display: block;
}
.star-btn {
    background: rgba(60, 60, 60, 0.92);
    border: none;
    border-radius: 7px;
    color: #ffe066;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.17s;
    pointer-events: auto;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.11);
}
.speaker-btn {
    background: rgba(60, 60, 60, 0.92);
    border: none;
    border-radius: 7px;
    color: #ffe066;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.17s;
    pointer-events: auto;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.11);
}
.star-btn:hover,
.speaker-btn:hover {
    background: #333;
}

/*Stars*/

.dropdown-star-btn {
    background: none;
    border: none;
    color: #ffd700;
    font-size: 21px;
    position: absolute;
    top: 8px;
    left: 300px;
    cursor: pointer;
    padding: 0 1px;
    z-index: 4;
    transition: color 0.18s;
    line-height: 1;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
}
@media (max-width: 800px) {
    .dropdown-star-btn {
        top: 7px !important;
        left: auto !important;
        right: -175px !important;
        margin-top: 0 !important;
    }
}
.dropdown-star-btn.starred {
    color: #ffd700;
    text-shadow: 0 0 3px #cbb400;
}
.dropdown-star-btn:hover {
    color: #ffd700;
    filter: brightness(1.33) drop-shadow(0 0 4px #ffef88);
}

.speaker-btn.audio-playing {
    background: #dbeaff !important;
    box-shadow:
        0 0 0 2px #7ca0fd,
        0 0 12px 2px #73e1fa77 !important;
    filter: drop-shadow(0 0 5px #7ca0fdcc) !important;
}

.side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card .main-text {
    margin: 30px 0 10px 0;
    text-align: center;
    flex: none !important;
}
.card .images,
.card .content img {
    display: none !important;
}
.hint-container {
    z-index: 2;
    position: relative;
}
#mnemonic-text {
    z-index: 3;
    text-align: center;
    display: block; /* FIX: override flex, let text center naturally */
    padding: 10px;
    width: 220px;
    margin: 5px auto 0 auto;
}
#image-text {
    z-index: 3;
}
#image-text img {
    max-width: 180px;
    max-height: 120px;
    border-radius: 5px;
    box-shadow: 0 0 4px #0008;
    display: block;
    margin: 0 auto;
    background: #232429;
}
.hint-text {
    background: #232429 !important;
}

.learned-button.learned {
    background-color: #2962ff !important;
}

.dropdown-star-btn {
    user-select: none !important;
    pointer-events: auto !important;
}

#flashcard-dropdown > .current-card {
    background: #19407c !important;
    color: #fff !important;
    font-weight: bold;
    box-shadow: 0 2px 8px #19407c33;
}

#swap-word-def-btn {
    background-color: #383b42 !important;
    color: #fafafa !important;
    border: 1.2px solid #4b4b5d !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    padding: 7px 10px !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
    text-align: left;
    transition: background 0.2s;
}
#swap-word-def-btn:hover {
    background: #444 !important;
}

#learned-reminder-btn {
    background: linear-gradient(135deg, #35363a 0%, #222328 100%) !important;
    color: #fafafa !important;
    border: 1.5px solid #45474f !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-weight: 500;
    padding: 7px 10px !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
    text-align: left;
    transition:
        background 0.24s,
        border 0.17s,
        color 0.17s;
}
#learned-reminder-btn:hover {
    background: linear-gradient(135deg, #484851 0%, #2a2e33 100%) !important;
    color: #fff !important;
    border: 1.5px solid #627095 !important;
}
#learned-reminder-btn:active {
    background: linear-gradient(135deg, #262735 30%, #15171e 100%) !important;
    border: 1.7px solid #7287ce !important;
    color: #cbe6ff !important;
}
#flashcard-dropdown-toggle.learned-glow {
    box-shadow:
        0 0 10px 2px #3beeec88,
        0 0 3px 2px #268dff55;
    border: 1.5px solid #62cafe !important;
}

/*Quick orange hue*/

.learned-glow {
    box-shadow:
        0 0 10px 2px #3beeec88,
        0 0 3px 2px #268dff55;
    border: 1.5px solid #62cafe !important;
}
.learned-glow-temporary {
    box-shadow:
        0 0 16px 2.5px #f1e344cc,
        0 0 3px 2px #ffb300bb !important;
    border: 1.7px solid #f5c921 !important;
}
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    width: 100%;
}

.main-btns,
.utility-btns {
    display: flex;
    align-items: center;
    gap: 5px;
}

.button-container .hint-container,
.button-container .utility-btns > * {
    align-self: center;
}

select:hover,
.settings-dropdown-nice select:hover,
#topic-dropdown:hover {
    box-shadow:
        0 0 0 2px #5dacff,
        0 2px 12px 0 #4bb9ff44;
    border: 1px solid #63b7ff !important;

    color: #f6fbff;
    transition:
        box-shadow 0.16s,
        border 0.16s,
        background 0.16s,
        color 0.12s;
}

option:hover,
option:focus {
    background: #24314b !important;
    color: #fff !important;
}

:root {
    --main-btn-bg: linear-gradient(135deg, #35363a 0%, #222328 100%);
    --main-btn-bg-hover: linear-gradient(135deg, #484851 0%, #2a2e33 100%);
    --main-btn-border: #45474f;
}

.button-container button,
.hint-button,
.arrow-button,
.flip-button,
.dropdown-toggle,
#topic-dropdown,
.learned-button {
    background: var(--main-btn-bg) !important;
    border: 1.5px solid var(--main-btn-border) !important;
}
.button-container button:hover,
.hint-button:hover,
.arrow-button:hover,
.flip-button:hover,
.dropdown-toggle:hover,
#topic-dropdown:hover,
.learned-button:hover {
    background: var(--main-btn-bg-hover) !important;
}

#topic-search-bar {
    position: relative;
}
#search-dropdown-list div {
    padding: 9px 13px;
    color: #eaf6ff;
    cursor: pointer;
    border-radius: 10px;
    font-size: 16px;
    white-space: pre-line;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 196px;
    min-width: 0;
    background: none;
}
#search-dropdown-list div:hover {
    background: #2d3448;
    color: #fff;
    font-weight: bold;
}
#topic-search-input:focus {
    outline: 2px solid #49a9fe;
}

#topic-search-input {
    box-sizing: border-box;
    height: 38px !important;
    line-height: 1.25;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-right: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
}

#topic-search-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 190px;
}

#topic-dropdown-btn {
    border: 1.5px solid #3d4157 !important;
    border-left: none !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 38px !important;
    background: linear-gradient(120deg, #22242a 70%, #34374a 100%) !important;
    color: #fafafa;
    font-size: 19px;
    cursor: pointer;
    padding: 0 11px 0 9px;
    margin-left: -6px;
    display: flex;
    align-items: center;
    transition: background 0.18s;
}
#topic-dropdown-btn:hover,
#topic-dropdown-btn:focus {
    background: #292b36 !important;
    color: #fff !important;
}

#topic-search-input:focus,
#topic-dropdown-btn:focus {
    z-index: 2;
}

#search-dropdown-list {
    margin-top: 4px;
}

#search-dropdown-list div {
    transition:
        background 0.21s,
        border 0.17s,
        box-shadow 0.17s,
        color 0.12s;
    border: 2.5px solid transparent;
    box-shadow: none;
    background: none;
    position: relative;
}
#search-dropdown-list div:hover {
    background: #2d3448;
    color: #fff;
    border: 2.5px solid #56b1fd;
    box-shadow: 0 0 10px #2196f388;
    z-index: 2;
    font-weight: bold;
}
#search-dropdown-list div.active-topic {
    background: #224fa7;
    color: #fff;
    border: 2.5px solid #56b1fd;
    box-shadow:
        0 0 20px #36a2ffcc,
        0 0 2px #2796ff;
    font-weight: bold;
    z-index: 3;
}

#topic-status {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    color: #eee;
    font-size: 22px;
    font-weight: none;
    text-align: center;
    user-select: none;
    pointer-events: none;
    max-width: 350px;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: -45px;
}
@media (max-width: 850px) {
    #topic-status {
        width: 460px;
        font-size: 20px;
        margin-left: 80px;
    }
}
@media (max-width: 680px) {
    #topic-status {
        width: 170px;
        font-size: 13px;
        margin-left: 90px;
    }
}

#search-dropdown-list {
    overscroll-behavior: contain;
}

.learned-button.learned {
    box-shadow:
        0 0 0 3px #426cfc88,
        0 0 10px #426cfc44 !important;
}
.learned-button:not(.learned) {
    box-shadow:
        0 0 0 3px #42fc5288,
        0 0 10px #42fc5244 !important;
}

#mnemonic-dropdown,
#mnemonic-text,
#image-text,
#hint-text {
    top: auto !important;
    bottom: calc(100% + 5px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-bottom: 5px !important;
    margin-top: 0 !important;
    z-index: 31 !important;
}
#hint-text,
#mnemonic-dropdown,
#mnemonic-text,
#image-text {
    max-height: 230px !important;
    overflow-y: auto !important;
}

/*Flashcard moving buttons*/

.move-arrow-btn {
    background: none !important;
    border: none !important;
    color: #b6cffb !important;
    font-size: 18px !important;
    margin: 0 auto !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    opacity: 0.88 !important;
    z-index: 32 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
        background 0.16s,
        color 0.16s,
        opacity 0.15s;
    position: static !important;
}
.move-arrow-btn:hover {
    color: #7adcff !important;
    background: #29426f85 !important;
    opacity: 1 !important;
}
.arrows-left-div {
    position: absolute !important;
    left: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5px !important;
    z-index: 100 !important;
    align-items: center !important;
    height: 58px !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

.card-index-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin: 0 auto 0 auto;
    background: linear-gradient(135deg, #28364d, #243254 67%, #1a232b 100%);
    border-radius: 8px;
    border: 1.5px solid #3a598e;
    color: #f7fbff;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 2.5px 8px #08214414;
    letter-spacing: 0.5px;
}

/*SHuffle/reset order buttons*/

#flashcard-dropdown > div:first-of-type {
    margin-top: 4px !important;
}
#flashcard-dropdown .learned-button {
    margin: 0 0 0 0 !important;
    min-width: 118px;
    font-size: 16px;
}
#flashcard-dropdown > div > .learned-button {
    margin-top: 4px;
}
#flashcard-dropdown > div:first-child {
    margin-bottom: 2px !important;
}

/*Terms reset and shuffle btns broder color*/

.shuffle-order-btn {
    background: linear-gradient(105deg, #b55c09 0%, #9a410a 98%) !important;
    border: 3.5px solid #ffbb32 !important;
    color: #fffbe7 !important;
    box-shadow:
        0 0 12px 2.5px #e2900388,
        0 0 0 7px #ffb20033;
    outline: 2.5px solid #de8717cc !important;
    outline-offset: 0.5px;
    z-index: 10;
}
.shuffle-order-btn:hover {
    background: linear-gradient(105deg, #e59018 0%, #be610d 100%) !important;
    border: 3px solid #ffe19e !important;
    box-shadow: 0 0 16px 6px #f1af34bb;
    outline: 2.5px solid #ffd56d99 !important;
}

.reset-order-btn {
    background: linear-gradient(105deg, #3a5777 0%, #253e61 98%) !important;
    border: 3.5px solid #45bafd !important;
    color: #e9f4ff !important;
    box-shadow:
        0 0 12px 2.5px #1a6cf488,
        0 0 0 7px #36cbff44;
    outline: 2.5px solid #7ec8fadd !important;
    outline-offset: 0.5px;
    z-index: 10;
}
.reset-order-btn:hover {
    background: linear-gradient(105deg, #339eea 0%, #2351b1 98%) !important;
    border: 3px solid #f0faff !important;
    box-shadow: 0 0 16px 6px #6ac4f4bb;
    outline: 2.5px solid #7ec8faaa !important;
}
/* Boarder colors end*/

.settings-btn-similar {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    background: linear-gradient(135deg, #35363a 0%, #222328 100%);
    color: #fafafa;
    border: 1.5px solid #45474f;
    border-radius: 9px;
    font-size: 15px;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-weight: 500;
    padding: 7px 10px;
    margin-bottom: 0;
    box-sizing: border-box;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.24s,
        border 0.17s,
        color 0.17s;
}
.settings-btn-similar:hover {
    background: linear-gradient(135deg, #484851 0%, #2a2e33 100%);
    border: 1.5px solid #627095;
}
.settings-btn-similar:active {
    background: linear-gradient(135deg, #262735 30%, #15171e 100%);
    border: 1.7px solid #7287ce;
    color: #cbe6ff;
}

@media (max-width: 800px) {
    #note-inject-here {
        left: -5px !important;
        position: relative !important;
    }
}

@media (max-width: 680px) {
    .align-container {
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    #topic-status {
        width: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 16px 0 8px 0 !important;
        font-size: 13px !important;
        max-width: 100vw !important;
        text-align: center !important;
        position: relative !important;
        order: 3 !important;
        display: block !important;
    }
    .align-container > #topic-status {
        flex-basis: 100% !important;
        order: 3 !important;
    }
    .settings-dropdown-nice {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 300px !important;
        min-width: 300px !important;
        max-width: 90vw !important;
        box-sizing: border-box !important;
        max-height: 74vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .settings-dropdown-nice .settings-row {
        gap: 4px !important;
    }
    .settings-dropdown-nice select,
    .settings-dropdown-nice button {
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
        box-sizing: border-box !important;
    }
    #swap-word-def-btn,
    #learned-reminder-btn,
    .settings-btn-similar {
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 14px !important;
    }
    .settings-dropdown-nice label {
        min-width: 70px !important;
        font-size: 14px !important;
    }
    .hint-container {
        margin-right: 3px !important;
    }
    #flashcard-dropdown.dropdown-content {
        top: -430px !important;
        transform: translateX(-40%) !important;
        right: auto !important;
        min-width: 0 !important;
        width: 300px !important;
        max-width: 93vw !important;
        box-sizing: border-box !important;
    }
    #voice-choice-dropdown,
    #voice-speed-dropdown,
    .settings-dropdown-nice select {
        font-size: 12px !important;
        height: 32px !important;
        line-height: 32px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        overflow-y: auto !important;
    }
    #voice-choice-dropdown option,
    #voice-speed-dropdown option,
    .settings-dropdown-nice select option {
        font-size: 8px !important;
        white-space: normal !important;
        word-break: break-all !important;
    }
    .main-btns,
    .hint-container {
        gap: 0px !important;
    }
    .button-container {
        gap: 0px !important;
    }
}

/* === Fullscreen Overlay === */
#fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 36, 0.99); /* nearly opaque */
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(55px) brightness(0); /* extra blur & dim */
    animation: fsoverlayfadein 0.18s;
}
@keyframes fsoverlayfadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#fullscreen-flashcard {
    width: 810px;
    max-width: 87vw;
    height: 64vh;
    max-height: 77vh;
    margin: 0 auto 18px auto;
    z-index: 1;
    pointer-events: auto !important;
}
#fullscreen-flashcard .card {
    height: 100% !important;
    min-height: 340px;
    font-size: 2.2em !important;
}
#fullscreen-buttons {
    margin-top: 0;
    margin-bottom: 0;
    scale: 1.22;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px !important;
    margin-left: 16px !important;
}
@media (max-width: 950px) {
    #fullscreen-inner {
        width: 100vw;
        height: 97vh;
    }
    #fullscreen-flashcard {
        max-width: 90vw !important;
        width: 90vw !important;
    }
    #fullscreen-buttons {
        scale: 1;
    }
}
@media (max-width: 750px) {
    #fullscreen-inner {
        width: 100vw;
        height: 99vh;
    }
    #fullscreen-flashcard {
        max-width: 99vw !important;
        width: 99vw;
        height: 53vh;
    }
    #fullscreen-buttons {
        scale: 0.97;
        margin-top: 50px !important;
    }
    #fullscreen-buttons .arrow-button,
    #fullscreen-buttons .flip-button,
    #fullscreen-buttons .has-tooltip {
        min-width: 48px !important;
        width: 67px !important;
        max-width: 81px !important;
        height: 35px !important;
        font-size: 14px !important;
        padding: 5px 6px !important;
    }
}

#fullscreen-overlay {
    transition: 0.11s all;
}
#fullscreen-overlay[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}
#fullscreen-btn svg,
.fullscreen-btn svg {
    pointer-events: none;
}

#fullscreen-buttons > #flashcard-dropdown-toggle {
    margin-right: 5px !important;
}

/*Terms Fullscreen popup*/

#flashcard-dropdown-fs {
    background: #232429 !important;
    color: #fff !important;
    border-radius: 14px !important;
    border: 1.5px solid #343a40 !important;
    box-shadow:
        0 8px 24px rgba(30, 40, 60, 0.46),
        0 1.5px 8px rgba(0, 0, 0, 0.18) !important;
    padding: 18px 30px 20px 30px !important;
    min-width: 320px !important;
    max-width: 500px;
    z-index: 1000031 !important;
    max-height: 54vh !important;
    overflow-y: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    overscroll-behavior: contain;
}
#fullscreen-overlay #flashcard-dropdown-fs {
    position: fixed;
    z-index: 1000032 !important;
}

.hint-text.fs-popup.fs-mini-popup,
#image-text-fs.fs-mini-popup {
    min-width: 220px !important;
    max-width: 260px !important;
    width: 260px !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
    border-radius: 9px !important;
    background: linear-gradient(120deg, #232639 94%, #232439 100%) !important;
    box-shadow:
        0 5px 32px #15185b47,
        0 1px 8px #223c5218;
    white-space: normal !important;
    cursor: pointer !important;
    z-index: 10000010 !important;
    position: fixed !important;
    left: 50% !important;
    top: unset !important;
    bottom: 25px !important;
    transform: translateX(-50%) !important;
    right: unset !important;
}
#image-text-fs.fs-mini-popup {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: unset !important;
    max-width: unset !important;
    width: unset !important;
    border-radius: 0 !important;
    min-height: unset !important;
    text-align: center;
}
#image-text-fs.fs-mini-popup > img {
    display: block;
    margin: 0 auto;
    box-shadow: 0 0 6px #000a;
    border-radius: 7px;
    background: #232429;
    max-width: 145px;
    max-height: 82px;
    padding: 0;
}
.hint-text.fs-popup.fs-mini-popup:active,
#image-text-fs.fs-mini-popup:active {
    box-shadow:
        0 6px 60px #1856c182,
        0 5px 22px #214bff15;
}

#fullscreen-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 94vw;
    height: 94vh;
    pointer-events: auto;
    margin-top: 0vh;
}

.hint-text.fs-popup,
.hint-text.fs-popup.fs-mini-popup {
    overflow-y: auto !important;
    max-height: 170px !important;
}
/*Fullscreen Overlay END*/

@media (max-width: 750px) {
    .main-btns,
    .hint-container {
        gap: 0px !important;
    }
    .button-container {
        gap: 0px !important;
    }
    .main-btns > button,
    .utility-btns > .hint-container > button,
    .utility-btns > button {
        min-width: 28px !important;
        width: 58px !important;
        max-width: 65px !important;
        font-size: 11px !important;
        padding: 5px 6px !important;
    }
    .dropdown-toggle {
        min-width: 38px !important;
        width: 58px !important;
        max-width: 70px !important;
        height: 32px !important;
        font-size: 12px !important;
        padding: 7px 6px !important;
    }
    .arrow-button,
    .flip-button {
        min-width: 28px !important;
        width: 32px !important;
        max-width: 36px !important;
        height: 32px !important;
        font-size: 15px !important;
        padding: 0 !important;
    }
}