body {
    --app-header-height: 4.8rem;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: var(--app-header-height) 0 0;
    min-height: 100vh;
    background: #f8f9fa;
    color: #333;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    overflow-x: hidden;
}

header {
    background: #9D00FF;
    color: #fff;
    padding: 0.6rem 1rem;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.app-header-shell {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1100px;
}

.app-header-brand {
    align-items: center;
    display: flex;
    gap: 0.72rem;
    min-width: 0;
    text-align: left;
}

.app-header-home-link {
    display: inline-flex;
    flex-shrink: 0;
    text-decoration: none;
}

.app-header-logo {
    border-radius: 0.8rem;
    display: block;
    flex-shrink: 0;
    height: 2.5rem;
    object-fit: cover;
    width: 2.5rem;
}

.app-header-brand-copy {
    min-width: 0;
}

.header-menu-button {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    display: none;
    flex-direction: column;
    gap: 0.22rem;
    height: 2.35rem;
    justify-content: center;
    padding: 0;
    width: 2.6rem;
}

.header-menu-button span {
    background: #fff;
    border-radius: 999px;
    display: block;
    height: 2px;
    width: 1.1rem;
}

.header-menu-button:hover {
    background: rgba(255, 255, 255, 0.22);
}

body:not(.is-authenticated) .app-header-shell {
    justify-content: center;
}

body:not(.is-authenticated) .app-header-brand {
    text-align: center;
}

body:not(.is-authenticated) .app-header-brand-copy {
    text-align: center;
}

header h1 {
    font-size: 1.05rem;
    line-height: 1.2;
    margin: 0;
}

header p {
    font-size: 0.78rem;
    line-height: 1.25;
    margin: 0.1rem 0 0;
}

.app-header-user {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
}

.header-account-controls {
    align-items: flex-start;
    display: flex;
    flex-shrink: 0;
    gap: 0.6rem;
    margin-left: auto;
}

.app-header-user #currentUserLabel {
    font-size: 0.86rem;
    font-weight: bold;
    line-height: 1.25;
    max-width: 16rem;
    text-align: right;
    white-space: nowrap;
}

.header-settings-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
}

.header-settings-nav .settings-category {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.header-settings-nav .settings-category:hover,
.header-settings-nav .settings-category:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.header-settings-nav .settings-category-toggle {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0;
    padding: 0.28rem 0;
    position: relative;
    transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.header-settings-nav .settings-category:hover .settings-category-toggle,
.header-settings-nav .settings-category:focus-within .settings-category-toggle {
    color: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}

.header-settings-nav .settings-category-toggle::after {
    display: none;
}

.header-settings-nav .settings-category-toggle::before {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    bottom: -0.1rem;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: -0.1rem;
    transform: scale(0.92);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: -1;
}

.header-settings-nav .settings-category:hover .settings-category-toggle::before,
.header-settings-nav .settings-category[open] .settings-category-toggle::before,
.header-settings-nav .settings-category:focus-within .settings-category-toggle::before {
    opacity: 1;
    transform: scale(1);
}

.header-settings-nav .settings-category-body {
    background: #fff;
    border: 1px solid #d8e2ea;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
    gap: 0.9rem;
    margin-top: 0.65rem;
    max-height: calc(100vh - 6rem);
    min-width: min(30rem, calc(100vw - 1.25rem));
    overflow: auto;
    padding: 1rem;
    position: absolute;
    left: 0;
    top: 100%;
    width: max-content;
    z-index: 1001;
}

.header-logout-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: 0;
    position: relative;
    top: -0.32rem;
    width: 2.2rem;
    height: 2.2rem;
}

.header-logout-button svg {
    filter: drop-shadow(0 8px 16px rgba(90, 0, 12, 0.24));
    height: 2.1rem;
    transition: transform 0.18s ease, filter 0.18s ease;
    width: 2.1rem;
}

.header-logout-button .power-ring,
.header-logout-button .power-line {
    fill: none;
    stroke: #ff4c57;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-logout-button .power-ring {
    stroke-width: 2.2;
}

.header-logout-button .power-line {
    stroke-width: 2.4;
}

.header-logout-button:hover {
    background: transparent;
    transform: none;
}

.header-logout-button:hover svg {
    filter: drop-shadow(0 10px 18px rgba(130, 0, 18, 0.34));
    transform: translateY(-1px) scale(1.04);
}

main {
    flex: 1;
    max-width: 800px;
    margin: 1rem auto;
    padding: 0 1rem;
    width: 100%;
}

.auth-panel {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    margin: 1rem auto;
    max-width: 460px;
    padding: 0 1rem;
    width: 100%;
}

.auth-box,
.user-bar {
    background: #fff;
    border: 1px solid #d8e2ea;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 60, 100, 0.08);
    padding: 1rem;
}

.auth-box h2 {
    color: #005fa3;
    font-size: 1.1rem;
    margin: 0 0 0.75rem;
}

.auth-grid {
    display: grid;
    gap: 0.55rem;
}

.auth-grid label {
    color: #444;
    font-weight: bold;
}

.auth-grid input,
.user-management input {
    border: 1px solid #b8c8d6;
    border-radius: 4px;
    font-size: 1rem;
    padding: 0.45rem 0.55rem;
}

.auth-status {
    color: #555;
    font-size: 0.9rem;
    font-weight: bold;
}

.auth-panel > .auth-status {
    grid-column: 1 / -1;
}

.auth-loading {
    display: grid;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

.auth-loading-label {
    color: #5a6472;
    font-size: 0.88rem;
    font-weight: 700;
}

.auth-loading-track {
    background: rgba(157, 0, 255, 0.12);
    border: 1px solid rgba(157, 0, 255, 0.18);
    border-radius: 999px;
    height: 0.45rem;
    overflow: hidden;
    position: relative;
}

.auth-loading-bar {
    animation: auth-loading-slide 1.15s ease-in-out infinite;
    background: linear-gradient(90deg, #9d00ff 0%, #d153ff 100%);
    border-radius: inherit;
    height: 100%;
    left: -38%;
    position: absolute;
    top: 0;
    width: 38%;
}

@keyframes auth-loading-slide {
    0% {
        left: -38%;
    }
    100% {
        left: 100%;
    }
}

.auth-verification {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.35rem;
}

#appMain {
    position: relative;
}

.app-loading-overlay {
    align-items: center;
    background: rgba(12, 18, 24, 0.28);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 60;
}

.app-loading-card {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(157, 0, 255, 0.14);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(10, 18, 28, 0.16);
    display: grid;
    gap: 0.7rem;
    min-width: min(24rem, calc(100vw - 2rem));
    padding: 1rem 1.1rem;
}

.app-loading-label {
    color: #213345;
    font-size: 0.95rem;
    font-weight: 700;
}

.app-loading-track {
    background: rgba(157, 0, 255, 0.12);
    border: 1px solid rgba(157, 0, 255, 0.18);
    border-radius: 999px;
    height: 0.5rem;
    overflow: hidden;
    position: relative;
}

.app-loading-bar {
    animation: auth-loading-slide 1.15s ease-in-out infinite;
    background: linear-gradient(90deg, #9d00ff 0%, #d153ff 100%);
    border-radius: inherit;
    height: 100%;
    left: -38%;
    position: absolute;
    top: 0;
    width: 38%;
}

body.app-busy .app-header-home-link,
body.app-busy .header-menu-button,
body.app-busy .app-header-user,
body.app-busy .header-account-controls,
body.app-busy #settings,
body.app-busy #logoutBtn {
    pointer-events: none;
}

body.confirm-overlay-open {
    overflow: hidden;
}

.confirm-overlay {
    align-items: center;
    background: rgba(5, 10, 18, 0.68);
    backdrop-filter: blur(6px);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.25rem;
    position: fixed;
    z-index: 3000;
}

.confirm-overlay.hidden {
    display: none;
}

.confirm-dialog {
    background: #ffffff;
    border: 1px solid rgba(15, 53, 84, 0.14);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    color: #172033;
    max-width: 28rem;
    padding: 1.5rem;
    width: min(100%, 28rem);
}

.confirm-dialog h2 {
    font-size: 1.35rem;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.confirm-dialog p {
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

.confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.confirm-actions button {
    min-width: 8.5rem;
}

.confirm-primary-button {
    background: #2ECC71;
    border: 1px solid #2ECC71;
    color: #fff;
}

.confirm-primary-button:hover {
    background: #28b463;
    border-color: #28b463;
}

.auth-link-button {
    background: transparent;
    color: #005fa3;
    padding: 0.2rem 0;
}

.auth-link-button:hover {
    background: transparent;
    color: #003f6f;
    text-decoration: underline;
}

#showRegisterBtn {
    display: none;
}

footer {
    color: #666;
    padding: 1rem;
    text-align: center;
}

footer p {
    margin: 0;
}

.settings-panel {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #d8e2ea;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 60, 100, 0.08);
}

.settings-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #005fa3;
    cursor: pointer;
    font-weight: bold;
    list-style: none;
}

.settings-toggle::-webkit-details-marker {
    display: none;
}

.settings-icon {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
    transition: transform 0.25s ease;
}

.settings-panel[open] .settings-icon,
.settings-toggle:hover .settings-icon {
    transform: rotate(45deg);
}

.settings-content {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.settings-category {
    border: 1px solid #e4edf3;
    border-radius: 8px;
    padding: 0.85rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.settings-category:hover,
.settings-category:focus-within {
    background: #f8fbfd;
    border-color: #b8d6eb;
    box-shadow: 0 8px 18px rgba(0, 95, 163, 0.12);
    transform: translateY(-1px);
}

.settings-category-toggle {
    align-items: center;
    color: #005fa3;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: bold;
    justify-content: space-between;
    list-style: none;
    margin: 0 0 0.75rem;
    transition: color 0.2s ease;
}

.settings-category:hover .settings-category-toggle,
.settings-category:focus-within .settings-category-toggle {
    color: #004f89;
}

.settings-category-toggle::-webkit-details-marker {
    display: none;
}

.settings-category-toggle::after {
    color: #5f7f99;
    content: "+";
    font-size: 1.15rem;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.settings-category:hover .settings-category-toggle::after,
.settings-category:focus-within .settings-category-toggle::after {
    color: #005fa3;
    transform: scale(1.15);
}

.settings-category[open] .settings-category-toggle::after {
    content: "-";
}

.settings-category:not([open]) .settings-category-toggle {
    margin-bottom: 0;
}

.settings-category-body {
    display: grid;
    gap: 0.75rem;
}

.setting-group {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 1.5fr) auto;
}

.setting-group label {
    color: #444;
    font-size: 0.95rem;
    font-weight: bold;
}

.setting-group input,
.setting-group select {
    border: 1px solid #b8c8d6;
    border-radius: 4px;
    font-size: 1rem;
    padding: 0.45rem 0.55rem;
}

.db-explorer-control select {
    min-width: 10rem;
}

.setting-actions {
    display: flex;
    justify-content: flex-end;
}

.user-management-grid {
    grid-template-columns: 1fr;
}

.user-management-grid .setting-group {
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr);
}

.user-management-grid .auth-status {
    min-height: 1.2rem;
}

.managed-users-list {
    display: grid;
    gap: 0.5rem;
}

.managed-users-heading {
    color: #005fa3;
    font-size: 0.95rem;
    font-weight: bold;
}

.managed-user-actions {
    display: flex;
    gap: 0.45rem;
    justify-content: flex-start;
    align-items: center;
}

.secondary-button {
    background: #6c757d;
}

.secondary-button:hover {
    background: #555f66;
}

#flashcard-section {
    text-align: center;
    margin-top: 0;
}

#flashcard {
    border: 2px solid #007acc;
    border-radius: 5px;
    padding: 2rem;
    background: #fff;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
}

#card-content.answer-visible {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem 0 2rem;
    width: 100%;
}

.card-front-word {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1.1rem 0 0.35rem;
}

.study-age-badge {
    background: #e8f3fb;
    border: 1px solid #b8d8ef;
    border-radius: 999px;
    bottom: 0.45rem;
    color: #005fa3;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1;
    padding: 0.35rem 0.65rem;
    position: absolute;
    right: 0.45rem;
    width: fit-content;
}

.course-age-badge {
    background: #f2f7ed;
    border: 1px solid #c9ddb8;
    border-radius: 999px;
    color: #3f6f1d;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1;
    padding: 0.35rem 0.65rem;
    position: absolute;
    right: 0.45rem;
    top: 0.45rem;
    white-space: nowrap;
    width: fit-content;
}

.rate-badge {
    background: #fff0d9;
    border: 1px solid #f0ca87;
    border-radius: 999px;
    color: #8a5b08;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: bold;
    left: 0.45rem;
    line-height: 1;
    padding: 0.35rem 0.65rem;
    position: absolute;
    top: 0.45rem;
    white-space: nowrap;
    width: fit-content;
}

.level-badge {
    background: #e5f4ea;
    border: 1px solid #add3b7;
    border-radius: 999px;
    color: #1f6a34;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: bold;
    left: 5.6rem;
    line-height: 1;
    padding: 0.35rem 0.65rem;
    position: absolute;
    top: 0.45rem;
    white-space: nowrap;
    width: fit-content;
}

.category-badge {
    background: #efe7fb;
    border: 1px solid #ccb8f0;
    border-radius: 999px;
    bottom: 0.45rem;
    color: #5a2e96;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: bold;
    left: 0.45rem;
    line-height: 1;
    max-width: calc(100% - 8rem);
    overflow: hidden;
    padding: 0.35rem 0.65rem;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: fit-content;
}

.card-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
}

.card-word {
    font-size: 1.5rem;
    font-weight: bold;
}

.card-meaning {
    font-size: 1rem;
    font-weight: normal;
}

.card-meaning-block {
    align-items: stretch;
}

.card-definition-block {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #d8e2ea;
    border-radius: 12px;
    display: grid;
    font-size: 1rem;
    gap: 0.45rem;
    max-width: min(34rem, 100%);
    line-height: 1.5;
    padding: 0.85rem 1rem;
    text-align: left;
    width: 100%;
}

.card-definition-heading {
    margin-bottom: 0;
}

.card-definition-block .definition-phonetic {
    font-size: 0.82rem;
}

.card-definition-block .definition-part {
    font-size: 0.9rem;
}

.card-definition-list {
    margin: 0;
    padding-left: 1.15rem;
}

.card-definition-list li + li {
    margin-top: 0.45rem;
}

.card-loading-block {
    gap: 0.6rem;
}

.card-loading-label {
    color: #5a6472;
    font-size: 0.88rem;
    font-weight: 700;
}

.card-loading-track {
    background: rgba(157, 0, 255, 0.12);
    border: 1px solid rgba(157, 0, 255, 0.18);
    border-radius: 999px;
    height: 0.45rem;
    overflow: hidden;
    position: relative;
}

.card-loading-bar {
    animation: auth-loading-slide 1.15s ease-in-out infinite;
    background: linear-gradient(90deg, #9d00ff 0%, #d153ff 100%);
    border-radius: inherit;
    height: 100%;
    left: -38%;
    position: absolute;
    top: 0;
    width: 38%;
}

.word-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d8e2ea;
    border-radius: 16px;
    color: #16202a;
    display: grid;
    gap: 1rem;
    line-height: 1.55;
    max-width: min(42rem, 100%);
    padding: 1rem;
    text-align: left;
    width: 100%;
}

.word-card__header {
    align-items: flex-start;
    border-bottom: 1px solid #d8e2ea;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: 0.9rem;
}

.word-card__word {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}

.word-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
}

.word-card__meta--standalone {
    margin-bottom: -0.2rem;
}

.word-card__meta span {
    background: #f2f5f9;
    border-radius: 999px;
    color: #405061;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.32rem 0.65rem;
}

.word-card__body {
    display: grid;
    gap: 0.9rem;
}

.word-section h3,
.word-grid h3 {
    color: #4f5f70;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 0.38rem;
    text-transform: uppercase;
}

.word-section p,
.word-grid p {
    font-size: 0.95rem;
    margin: 0;
}

.word-example {
    border-left: 3px solid #cbd6e2;
    color: #334155;
    padding-left: 0.8rem;
}

.word-section--highlight {
    background: #fff8d9;
    border: 1px solid #f3df92;
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
}

.word-section--rtl {
    direction: rtl;
    text-align: right;
}

.word-section--rtl h3,
.word-section--rtl p {
    text-align: right;
}

.word-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.word-grid > div {
    background: #f7fafc;
    border: 1px solid #e0e8ef;
    border-radius: 14px;
    padding: 0.8rem 0.9rem;
}

.word-grid--rtl {
    direction: rtl;
    text-align: right;
}

.word-grid--rtl > div,
.word-grid--rtl h3,
.word-grid--rtl p {
    text-align: right;
}

#controls {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

#speakAussie {
    order: 1;
}

#reviewActions {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    order: 2;
}

#reviewActions button {
    border: none;
    border-radius: 4px;
    color: #fff;
    min-width: 8.75rem;
    padding: 0.5rem 1rem;
    transition: background 0.18s ease;
}

#reviewActions button:hover {
    box-shadow: none;
    transform: none;
}

#showAnswer {
    background: #00679b;
    border-color: #00679b;
    color: #fff;
    order: 3;
    min-width: 10rem;
}

#controls.meaning-open #showAnswer {
    order: 5;
}

#showAnswer:hover {
    background: #005883;
    border-color: #005883;
}

#answerActions {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    max-width: 100%;
    order: 4;
}

#answerActions.hidden {
    display: none;
}

#answerActions button {
    background: linear-gradient(135deg, #ffffff, #eef5fb);
    border: 1px solid #c7d8e8;
    border-radius: 999px;
    color: #0f3554;
    min-height: 2.75rem;
    min-width: 8.75rem;
    padding: 0.65rem 1rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

#answerActions button:hover {
    background: linear-gradient(135deg, #ffffff, #e3f0fb);
    border-color: #9fc5e6;
    box-shadow: 0 10px 20px rgba(0, 95, 163, 0.12);
    transform: translateY(-1px);
}

#remembered {
    background: #1A73E8;
    border-color: #1A73E8;
    color: #fff;
}

#remembered:hover {
    background: #1765cb;
    border-color: #1765cb;
}

#forgot {
    background: #F39C12;
    border-color: #F39C12;
    color: #fff;
}

#forgot:hover {
    background: #d68910;
    border-color: #d68910;
}

#retireCard {
    background: #2ECC71;
    border-color: #2ECC71;
    color: #fff;
}

#retireCard:hover {
    background: #28b765;
    border-color: #28b765;
}

#nextNewCard {
    background: linear-gradient(135deg, #9d00ff, #c238ff);
    border-color: #9d00ff;
    color: #fff;
}

#nextNewCard:hover {
    background: linear-gradient(135deg, #8400d6, #ae22ea);
    border-color: #8400d6;
}

.modern-action-button,
#reviewActions .modern-action-button,
#answerActions .modern-action-button {
    align-items: center;
    background-position: 0% 50%;
    background-size: 150% 150%;
    border: none;
    border-radius: 9999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 700;
    gap: 0.62rem;
    justify-content: center;
    letter-spacing: 0;
    min-height: 2.85rem;
    min-width: 9.5rem;
    outline: none;
    padding: 0.78rem 1.35rem;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
        background-position 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
        filter 0.2s ease;
}

.modern-action-button .btn-icon {
    display: inline-block;
    flex: 0 0 auto;
    height: 1.15rem;
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s ease;
    width: 1.15rem;
}

.modern-action-button:hover,
#reviewActions .modern-action-button:hover,
#answerActions .modern-action-button:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
}

.modern-action-button:active,
#reviewActions .modern-action-button:active,
#answerActions .modern-action-button:active {
    transform: translateY(1px) scale(0.98);
}

.modern-action-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.72), 0 0 0 6px rgba(157, 0, 255, 0.35);
}

.btn-speak-aussie {
    background: linear-gradient(135deg, #FFCD00 0%, #00843D 45%, #00622d 75%, #FFCD00 100%);
    box-shadow: 0 4px 15px rgba(0, 132, 61, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-speak-aussie:hover {
    box-shadow: 0 8px 24px rgba(0, 132, 61, 0.55);
}

.btn-speak-aussie:hover .audio-wave-1 {
    animation: wavePulse 0.6s infinite alternate ease-in-out;
}

.btn-speak-aussie:hover .audio-wave-2 {
    animation: wavePulse 0.6s infinite alternate ease-in-out 0.2s;
}

.btn-iknow {
    background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 45%, #1d4ed8 75%, #7c3aed 100%);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-iknow:hover {
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.55);
}

.btn-iknow:hover .btn-icon {
    transform: scale(1.15) rotate(5deg);
}

.btn-iknow .success-check {
    opacity: 0.82;
}

.btn-iknow:hover .success-check {
    opacity: 1;
    stroke: #a7f3d0;
}

.btn-iforgot {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 45%, #dc2626 75%, #ef4444 100%);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-iforgot:hover {
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.55);
}

.btn-iforgot:hover .btn-icon {
    transform: scale(1.15) rotate(-12deg);
}

.btn-iremembered {
    background: linear-gradient(135deg, #06b6d4 0%, #0d9488 45%, #007a87 75%, #06b6d4 100%);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-iremembered:hover {
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.55);
}

.btn-iremembered:hover .btn-icon {
    transform: scale(1.15);
}

.btn-show-meaning {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 45%, #8b5cf6 75%, #a855f7 100%);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-show-meaning:hover {
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.55);
}

.btn-show-meaning:hover .btn-icon {
    transform: scale(1.15) rotate(4deg);
}

.btn-definition {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 35%, #3730a3 70%, #251b87 100%);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.btn-examples {
    background: linear-gradient(135deg, #10b981 0%, #34d399 35%, #047857 70%, #064e3b 100%);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.btn-google-colorful {
    background: linear-gradient(135deg, #4285F4 0%, #EA4335 35%, #FBBC05 70%, #34A853 100%);
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-youtube {
    background: linear-gradient(135deg, #ff0000 0%, #ff3b30 40%, #cc0000 70%, #990000 100%);
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 35%, #d6249f 65%, #285AEB 100%);
    box-shadow: 0 4px 15px rgba(214, 36, 159, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-tiktok {
    background: #010101;
    box-shadow: -2px -2px 0 #00f2fe, 2px 2px 0 #fe0979, 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-tiktok .btn-icon {
    filter: drop-shadow(-1.5px -1px 0 #00f2fe) drop-shadow(1.5px 1px 0 #fe0979);
}

.btn-translate {
    background: linear-gradient(135deg, #1a73e8 0%, #4285F4 40%, #1557b0 70%, #0d3c82 100%);
    box-shadow: 0 4px 14px rgba(26, 115, 232, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-next {
    background: linear-gradient(135deg, #9d00ff 0%, #c238ff 45%, #7d00cc 100%);
    box-shadow: 0 4px 15px rgba(157, 0, 255, 0.35);
}

#reviewActions .modern-action-button.btn-iknow {
    background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 45%, #1d4ed8 75%, #7c3aed 100%);
}

#reviewActions .modern-action-button.btn-iforgot {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 45%, #dc2626 75%, #ef4444 100%);
}

#reviewActions .modern-action-button.btn-iremembered {
    background: linear-gradient(135deg, #06b6d4 0%, #0d9488 45%, #007a87 75%, #06b6d4 100%);
}

#answerActions .modern-action-button.btn-definition {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 35%, #3730a3 70%, #251b87 100%);
}

#answerActions .modern-action-button.btn-examples {
    background: linear-gradient(135deg, #10b981 0%, #34d399 35%, #047857 70%, #064e3b 100%);
}

#answerActions .modern-action-button.btn-google-colorful {
    background: linear-gradient(135deg, #4285F4 0%, #EA4335 35%, #FBBC05 70%, #34A853 100%);
}

#answerActions .modern-action-button.btn-youtube {
    background: linear-gradient(135deg, #ff0000 0%, #ff3b30 40%, #cc0000 70%, #990000 100%);
}

#answerActions .modern-action-button.btn-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 35%, #d6249f 65%, #285AEB 100%);
}

#answerActions .modern-action-button.btn-tiktok {
    background: #010101;
}

#answerActions .modern-action-button.btn-translate {
    background: linear-gradient(135deg, #1a73e8 0%, #4285F4 40%, #1557b0 70%, #0d3c82 100%);
}

#answerActions .modern-action-button.btn-next {
    background: linear-gradient(135deg, #9d00ff 0%, #c238ff 45%, #7d00cc 100%);
}

.btn-definition:hover,
.btn-examples:hover,
.btn-google-colorful:hover,
.btn-youtube:hover,
.btn-instagram:hover,
.btn-tiktok:hover,
.btn-translate:hover,
.btn-next:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.btn-definition:hover .btn-icon,
.btn-examples:hover .btn-icon,
.btn-google-colorful:hover .btn-icon,
.btn-youtube:hover .btn-icon,
.btn-instagram:hover .btn-icon,
.btn-tiktok:hover .btn-icon,
.btn-translate:hover .btn-icon,
.btn-next:hover .btn-icon {
    transform: scale(1.14);
}

@keyframes wavePulse {
    0% {
        opacity: 0.35;
        transform: scale(0.92);
    }
    100% {
        opacity: 1;
        transform: scale(1.08);
    }
}

.search-result-box {
    background: #fff;
    border: 1px solid #c9d7e3;
    border-radius: 5px;
    margin-top: 1rem;
    padding: 1rem;
    text-align: left;
}

.search-result-title {
    color: #005fa3;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#searchResultContent {
    color: #444;
    font-size: 0.95rem;
    font-weight: normal;
}

#searchResultContent ol {
    margin: 0;
    padding-left: 1.25rem;
}

#searchResultContent li + li {
    margin-top: 0.5rem;
}

.definition-heading {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.definition-phonetic {
    color: #666;
    font-size: 0.9rem;
}

.definition-part {
    color: #005fa3;
    font-weight: bold;
}

.definition-example {
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 0.2rem;
}

.example-text {
    align-items: center;
    color: #444;
    display: inline-flex;
    font-size: 1rem;
    font-style: italic;
    gap: 0.35rem;
    margin: 0;
}

#searchResultContent a {
    color: #005fa3;
    font-weight: bold;
    text-decoration: none;
}

#searchResultContent a:hover {
    text-decoration: underline;
}

#searchResultContent p {
    margin: 0.2rem 0 0;
}

.translation-text {
    direction: rtl;
    font-size: 1.1rem;
    line-height: 1.9;
    text-align: right;
    white-space: pre-line;
}

.search-result-empty {
    margin: 0;
}

.table-page {
    max-width: 1200px;
}

.table-status {
    color: #555;
    font-weight: bold;
    margin-bottom: 0.75rem;
}

.table-filter-bar {
    align-items: center;
    background: #fff;
    border: 1px solid #d8e2ea;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
}

.table-filter-bar label {
    color: #444;
    font-weight: bold;
}

.table-filter-bar input,
.table-filter-bar select {
    border: 1px solid #b8c8d6;
    border-radius: 4px;
    font-size: 1rem;
    padding: 0.45rem 0.55rem;
}

.table-filter-bar input {
    min-width: 16rem;
}

.table-pagination-bar {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.table-page-summary {
    color: #556371;
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 13rem;
    text-align: center;
}

.table-scroll {
    background: #fff;
    border: 1px solid #d8e2ea;
    border-radius: 8px;
    overflow: auto;
}

.db-table {
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 100%;
    text-align: left;
}

.db-table th,
.db-table td {
    border-bottom: 1px solid #e4edf3;
    padding: 0.55rem 0.7rem;
    vertical-align: top;
}

.db-table th {
    background: #e8f3fb;
    color: #005fa3;
    cursor: pointer;
    position: sticky;
    top: 0;
    white-space: nowrap;
}

.db-table th:hover {
    background: #d9edf9;
}

.db-table tbody tr:hover {
    background: #f6fbff;
}

.db-table td {
    cursor: pointer;
}

.db-table td:hover {
    background: #edf7ff;
}

.sortable-header:focus {
    outline: 2px solid #007acc;
    outline-offset: -2px;
}

.db-table td:focus {
    outline: 2px solid #007acc;
    outline-offset: -2px;
}

.table-sort-button {
    align-items: center;
    background: transparent;
    color: inherit;
    display: inline-flex;
    font: inherit;
    font-weight: bold;
    gap: 0.35rem;
    padding: 0;
    text-align: left;
}

.table-sort-button:hover {
    background: transparent;
    color: #003f6f;
    text-decoration: underline;
}

.table-sort-button[data-direction="asc"]::after {
    content: "▲";
    font-size: 0.7rem;
}

.table-sort-button[data-direction="desc"]::after {
    content: "▼";
    font-size: 0.7rem;
}

.db-table td {
    max-width: 28rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.db-table td {
    position: relative;
}

.table-cell-text {
    display: inline;
}

button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    background: #007acc;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
}

button:hover {
    background: #005fa3;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

body[data-theme="dark"] {
    background: #101418;
    color: #e7edf3;
    color-scheme: dark;
}

body[data-theme="dark"] .auth-box,
body[data-theme="dark"] .user-bar,
body[data-theme="dark"] .settings-panel,
body[data-theme="dark"] #flashcard,
body[data-theme="dark"] .search-result-box,
body[data-theme="dark"] .table-filter-bar,
body[data-theme="dark"] .table-scroll {
    background: #171d24;
    border-color: #2c3845;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] .settings-category {
    border-color: #2c3845;
}

body[data-theme="dark"] .settings-category:hover,
body[data-theme="dark"] .settings-category:focus-within {
    background: #1d2630;
    border-color: #5c3f7d;
    box-shadow: 0 8px 18px rgba(157, 0, 255, 0.14);
}

body[data-theme="dark"] .settings-toggle,
body[data-theme="dark"] .settings-category-toggle,
body[data-theme="dark"] .auth-box h2,
body[data-theme="dark"] .search-result-title,
body[data-theme="dark"] .definition-part,
body[data-theme="dark"] #searchResultContent a,
body[data-theme="dark"] .managed-users-heading {
    color: #d8a7ff;
}

body[data-theme="dark"] .settings-category:hover .settings-category-toggle,
body[data-theme="dark"] .settings-category:focus-within .settings-category-toggle,
body[data-theme="dark"] .settings-category:hover .settings-category-toggle::after,
body[data-theme="dark"] .settings-category:focus-within .settings-category-toggle::after {
    color: #f0ddff;
}

body[data-theme="dark"] .settings-category-toggle::after {
    color: #b986dc;
}

body[data-theme="dark"] .auth-grid label,
body[data-theme="dark"] .setting-group label,
body[data-theme="dark"] .table-filter-bar label,
body[data-theme="dark"] #searchResultContent,
body[data-theme="dark"] .example-text {
    color: #d9e1ea;
}

body[data-theme="dark"] footer,
body[data-theme="dark"] .auth-status,
body[data-theme="dark"] .auth-loading-label,
body[data-theme="dark"] .app-loading-label,
body[data-theme="dark"] .table-status,
body[data-theme="dark"] .table-page-summary,
body[data-theme="dark"] .definition-phonetic,
body[data-theme="dark"] .definition-example {
    color: #aeb9c5;
}

body[data-theme="dark"] .auth-loading-track,
body[data-theme="dark"] .app-loading-track {
    background: rgba(157, 0, 255, 0.18);
    border-color: rgba(209, 83, 255, 0.26);
}

body[data-theme="dark"] .app-loading-card {
    background: rgba(23, 29, 36, 0.9);
    border-color: #32404d;
}

body[data-theme="dark"] .auth-link-button {
    color: #d8a7ff;
}

body[data-theme="dark"] .auth-link-button:hover {
    color: #f0ddff;
}

body[data-theme="dark"] .header-settings-nav .settings-category-toggle {
    color: #fff;
}

body[data-theme="dark"] .header-settings-nav .settings-category:hover,
body[data-theme="dark"] .header-settings-nav .settings-category:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

body[data-theme="dark"] .header-settings-nav .settings-category:hover .settings-category-toggle,
body[data-theme="dark"] .header-settings-nav .settings-category:focus-within .settings-category-toggle {
    color: rgba(255, 255, 255, 0.82);
}

body[data-theme="dark"] .header-settings-nav .settings-category-toggle::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .header-settings-nav .settings-category-body {
    background: #171d24;
    border-color: #2c3845;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] input,
body[data-theme="dark"] select {
    background: #0f141a;
    border-color: #3b4a59;
    color: #e7edf3;
}

body[data-theme="dark"] input[readonly] {
    background: #151b22;
    color: #aeb9c5;
}

body[data-theme="dark"] #flashcard {
    border-color: #9D00FF;
}

body[data-theme="dark"] .card-definition-block {
    background: rgba(23, 29, 36, 0.92);
    border-color: #32404d;
}

body[data-theme="dark"] .card-loading-label {
    color: #d6deea;
}

body[data-theme="dark"] .word-card {
    background: rgba(23, 29, 36, 0.96);
    border-color: #32404d;
    color: #e8eef7;
}

body[data-theme="dark"] .word-card__header {
    border-bottom-color: #32404d;
}

body[data-theme="dark"] .word-card__meta span {
    background: #1e2936;
    color: #d6deea;
}

body[data-theme="dark"] .word-section h3,
body[data-theme="dark"] .word-grid h3 {
    color: #9fb2c7;
}

body[data-theme="dark"] .word-example {
    border-left-color: #485b70;
    color: #d6deea;
}

body[data-theme="dark"] .word-section--highlight {
    background: rgba(86, 67, 10, 0.28);
    border-color: rgba(224, 194, 96, 0.45);
}

body[data-theme="dark"] .word-grid > div {
    background: #1a2530;
    border-color: #32404d;
}

body[data-theme="dark"] .study-age-badge {
    background: #182638;
    border-color: #315272;
    color: #a9d7ff;
}

body[data-theme="dark"] .course-age-badge {
    background: #1e2a1a;
    border-color: #4c673d;
    color: #bce6a1;
}

body[data-theme="dark"] .rate-badge {
    background: #332814;
    border-color: #7a5a24;
    color: #ffd892;
}

body[data-theme="dark"] .level-badge {
    background: #173020;
    border-color: #39684a;
    color: #bff0ca;
}

body[data-theme="dark"] .category-badge {
    background: #26173b;
    border-color: #5c3790;
    color: #e1c9ff;
}

body[data-theme="dark"] .confirm-dialog {
    background: #171d24;
    border-color: #32404d;
    color: #e8eef7;
}

body[data-theme="dark"] .confirm-dialog p {
    color: #c5d0dc;
}

body[data-theme="dark"] #answerActions button {
    background: linear-gradient(135deg, #17202a, #202c39);
    border-color: #334458;
    color: #ecf3f9;
}

body[data-theme="dark"] #answerActions button:hover {
    background: linear-gradient(135deg, #1d2732, #273547);
    border-color: #516b88;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] #nextNewCard {
    background: linear-gradient(135deg, #9d00ff, #c238ff);
    border-color: #c238ff;
    color: #fff;
}

body[data-theme="dark"] .db-table th {
    background: #202b36;
    color: #d8a7ff;
}

body[data-theme="dark"] .db-table th:hover,
body[data-theme="dark"] .db-table tbody tr:hover,
body[data-theme="dark"] .db-table td:hover {
    background: #263443;
}

body[data-theme="dark"] .db-table th,
body[data-theme="dark"] .db-table td {
    border-bottom-color: #2c3845;
}

body[data-theme="dark"] .table-sort-button:hover {
    color: #f0ddff;
}

body[data-theme="dark"] button {
    background: #9D00FF;
    color: #fff;
}

body[data-theme="dark"] button:hover {
    background: #7d00cc;
}

body[data-theme="dark"] .modern-action-button,
body[data-theme="dark"] #reviewActions .modern-action-button,
body[data-theme="dark"] #answerActions .modern-action-button {
    color: #fff;
}

body[data-theme="dark"] .modern-action-button.btn-speak-aussie {
    background: linear-gradient(135deg, #FFCD00 0%, #00843D 45%, #00622d 75%, #FFCD00 100%);
}

body[data-theme="dark"] .modern-action-button.btn-iknow {
    background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 45%, #1d4ed8 75%, #7c3aed 100%);
}

body[data-theme="dark"] .modern-action-button.btn-iforgot {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 45%, #dc2626 75%, #ef4444 100%);
}

body[data-theme="dark"] .modern-action-button.btn-iremembered {
    background: linear-gradient(135deg, #06b6d4 0%, #0d9488 45%, #007a87 75%, #06b6d4 100%);
}

body[data-theme="dark"] .modern-action-button.btn-show-meaning {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 45%, #8b5cf6 75%, #a855f7 100%);
}

body[data-theme="dark"] #answerActions .modern-action-button.btn-definition {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 35%, #3730a3 70%, #251b87 100%);
}

body[data-theme="dark"] #answerActions .modern-action-button.btn-examples {
    background: linear-gradient(135deg, #10b981 0%, #34d399 35%, #047857 70%, #064e3b 100%);
}

body[data-theme="dark"] #answerActions .modern-action-button.btn-google-colorful {
    background: linear-gradient(135deg, #4285F4 0%, #EA4335 35%, #FBBC05 70%, #34A853 100%);
}

body[data-theme="dark"] #answerActions .modern-action-button.btn-youtube {
    background: linear-gradient(135deg, #ff0000 0%, #ff3b30 40%, #cc0000 70%, #990000 100%);
}

body[data-theme="dark"] #answerActions .modern-action-button.btn-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 35%, #d6249f 65%, #285AEB 100%);
}

body[data-theme="dark"] #answerActions .modern-action-button.btn-tiktok {
    background: #010101;
}

body[data-theme="dark"] #answerActions .modern-action-button.btn-translate {
    background: linear-gradient(135deg, #1a73e8 0%, #4285F4 40%, #1557b0 70%, #0d3c82 100%);
}

body[data-theme="dark"] #answerActions .modern-action-button.btn-next {
    background: linear-gradient(135deg, #9d00ff 0%, #c238ff 45%, #7d00cc 100%);
}

body[data-theme="dark"] .secondary-button {
    background: #4c5966;
}

body[data-theme="dark"] .secondary-button:hover {
    background: #5c6b7a;
}

body[data-theme="dark"] .icon-button {
    background: transparent;
    color: #d8a7ff;
}

body[data-theme="dark"] .icon-button:hover {
    background: rgba(216, 167, 255, 0.12);
    color: #f0ddff;
}

.icon-button {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    color: #007acc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    transform: translateY(0.3rem);
}

.inline-speaker-button {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    transform: none;
}

.icon-button:hover {
    background: rgba(0, 122, 204, 0.1);
    color: #005fa3;
    transform: translateY(0.15rem);
}

.inline-speaker-button:hover {
    transform: none;
}

.speaker-icon {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
}

.speaker-wave {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    opacity: 0.75;
    transform-origin: 13px 12px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.icon-button:hover .speaker-wave-inner {
    opacity: 1;
    transform: scaleX(1.12);
}

.icon-button:hover .speaker-wave-outer {
    opacity: 1;
    transform: scaleX(1.22);
}

.hidden {
    display: none !important;
}

@media (max-width: 700px) {
    body {
        --app-header-height: 5.9rem;
        line-height: 1.45;
    }

    header {
        padding: 0.4rem 0.85rem;
    }

    .app-header-shell {
        align-items: stretch;
        display: grid;
        gap: 0.45rem;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand menu"
            "panel panel";
    }

    .app-header-brand {
        align-items: center;
        grid-area: brand;
        text-align: left;
    }

    .app-header-logo {
        height: 2.35rem;
        width: 2.35rem;
    }

    .header-menu-button {
        display: inline-flex;
        grid-area: menu;
        justify-self: end;
    }

    .header-menu-button.hidden {
        display: none;
    }

    .app-header-user {
        background: rgba(10, 12, 18, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 14px;
        display: none;
        flex-direction: column;
        gap: 0.85rem;
        grid-area: panel;
        padding: 0.85rem;
        width: 100%;
    }

    body.mobile-header-open .app-header-user {
        display: flex;
    }

    .app-header-user #currentUserLabel {
        font-size: 0.78rem;
        max-width: none;
        text-align: left;
    }

    .header-settings-nav {
        align-items: stretch;
        display: grid;
        gap: 0.65rem 1rem;
        order: 2;
        width: 100%;
    }

    .header-account-controls {
        align-items: center;
        gap: 0.55rem;
        justify-content: space-between;
        margin-left: 0;
        order: 3;
        width: 100%;
    }

    .header-settings-nav .settings-category {
        position: static;
    }

    .header-settings-nav .settings-category-body {
        left: 0;
        right: 0;
        min-width: 0;
        width: auto;
    }

    header h1 {
        font-size: 1rem;
        margin: 0;
    }

    header p {
        font-size: 0.75rem;
        margin: 0.1rem 0 0;
    }

    main,
    .table-page {
        box-sizing: border-box;
        margin: 0.75rem auto;
        max-width: 100%;
        padding: 0 0.75rem;
    }

    .settings-panel {
        padding: 0.85rem;
    }

    .setting-group,
    .table-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .table-pagination-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .table-page-summary {
        min-width: 0;
    }

    .setting-group,
    .user-management-grid .setting-group {
        grid-template-columns: 1fr;
    }

    .setting-actions {
        justify-content: stretch;
    }

    .managed-user-actions {
        justify-content: stretch;
    }

    .setting-group input,
    .setting-group select,
    .setting-group button,
    .table-filter-bar input,
    .table-filter-bar select {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }

    #flashcard {
        box-sizing: border-box;
        min-height: 180px;
        padding: 2.2rem 1rem 3rem;
        width: 100%;
    }

    #card-content.answer-visible {
        gap: 0.65rem;
        padding: 2.4rem 0 2.2rem;
    }

    .card-front-word,
    .card-word {
        font-size: 1.3rem;
        line-height: 1.35;
    }

    .card-meaning {
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .card-definition-block {
        font-size: 0.88rem;
    }

    .word-card {
        padding: 0.85rem;
    }

    .word-card__word {
        font-size: 1.12rem;
    }

    .word-grid {
        grid-template-columns: 1fr;
    }

    .word-section p,
    .word-grid p {
        font-size: 0.88rem;
    }

    .card-line {
        align-items: center;
        flex-wrap: wrap;
        line-height: 1.35;
    }

    #controls {
        align-items: stretch;
        flex-direction: column;
    }

    #controls > button,
    #reviewActions,
    #reviewActions button,
    #answerActions,
    #answerActions button {
        box-sizing: border-box;
        width: 100%;
    }

    #speakAussie {
        order: 1;
    }

    #reviewActions {
        display: grid;
        gap: 0.55rem;
        grid-template-columns: 1fr;
        order: 2;
    }

    #showAnswer {
        order: 3;
    }

    #answerActions {
        display: grid;
        gap: 0.55rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        order: 4;
    }

    #answerActions.hidden {
        display: none;
    }

    #reviewActions button,
    #answerActions button {
        min-height: 3rem;
        min-width: 0;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        width: 100%;
    }

    #speakCard.icon-button {
        align-self: flex-end;
        width: 2.75rem;
    }

    .search-result-box {
        padding: 0.85rem;
    }

    .confirm-dialog {
        padding: 1.1rem;
    }

    .confirm-actions {
        justify-content: stretch;
    }

    .confirm-actions button {
        width: 100%;
    }

    .example-text {
        align-items: flex-start;
        line-height: 1.5;
    }

    .table-filter-bar {
        padding: 0.65rem;
    }

    .table-scroll {
        max-height: 70vh;
    }

    .db-table {
        font-size: 0.82rem;
    }

    .db-table th,
    .db-table td {
        padding: 0.45rem 0.55rem;
    }

    .db-table td {
        max-width: 16rem;
    }

    footer {
        font-size: 0.9rem;
        padding: 0.8rem;
    }
}

@media (max-width: 420px) {
    .auth-panel,
    main {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .auth-box {
        padding: 0.9rem;
    }

    #answerActions {
        grid-template-columns: 1fr;
    }

    button {
        font-size: 0.95rem;
    }

    #flashcard {
        padding: 2.4rem 0.85rem 3rem;
    }

    #card-content.answer-visible {
        padding: 2.6rem 0 2.1rem;
    }

    .study-age-badge {
        bottom: 0.35rem;
        right: 0.35rem;
    }

    .course-age-badge {
        right: 0.35rem;
        top: 0.35rem;
    }
}

/* Modern compact header/menu frame */
body {
    --app-header-height: 4.25rem;
}

header {
    background: transparent;
    box-shadow: none;
    padding: 0.7rem 1rem 0;
}

.app-header-shell {
    align-items: center;
    background: linear-gradient(90deg, #9d00ff, #b100ff);
    border-radius: 1.05rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr);
    margin: 0 auto;
    max-width: 1240px;
    min-height: 2.95rem;
    padding: 0 0.75rem;
    position: relative;
    width: min(1240px, calc(100vw - 2rem));
}

.app-header-brand {
    gap: 0.35rem;
    grid-column: 1;
    justify-self: start;
}

.app-header-logo {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.72rem;
    height: 2.05rem;
    width: 2.05rem;
}

header h1 {
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

header p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.58rem;
    font-weight: 750;
    line-height: 1;
    margin: 0.05rem 0 0;
    white-space: nowrap;
}

body:not(.is-authenticated) .app-header-shell {
    display: flex;
    justify-content: center;
    width: fit-content;
}

.app-header-user {
    display: contents;
}

.header-settings-nav {
    align-items: center;
    display: flex;
    gap: 0;
    grid-column: 2;
    justify-content: center;
    justify-self: center;
    min-width: 0;
}

.header-settings-nav .settings-category {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.header-settings-nav .settings-category:hover,
.header-settings-nav .settings-category:focus-within,
body[data-theme="dark"] .header-settings-nav .settings-category:hover,
body[data-theme="dark"] .header-settings-nav .settings-category:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.header-settings-nav .settings-category-toggle {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.95rem;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.83rem;
    font-weight: 850;
    justify-content: center;
    line-height: 1;
    margin: 0;
    min-height: 2.1rem;
    padding: 0.58rem 0.72rem;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}

.header-settings-nav .settings-category:hover .settings-category-toggle,
.header-settings-nav .settings-category[open] .settings-category-toggle,
.header-settings-nav .settings-category:focus-within .settings-category-toggle,
body[data-theme="dark"] .header-settings-nav .settings-category:hover .settings-category-toggle,
body[data-theme="dark"] .header-settings-nav .settings-category:focus-within .settings-category-toggle {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: none;
}

.header-settings-nav .settings-category-toggle::before,
.header-settings-nav .settings-category-toggle::after {
    display: none;
}

.header-settings-nav .settings-category-body,
body[data-theme="dark"] .header-settings-nav .settings-category-body {
    background: #151a21;
    border: 1px solid #2c3848;
    border-radius: 0.95rem;
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.42);
    color: #f8fafc;
    display: none;
    gap: 0.85rem 1.15rem;
    left: 50%;
    margin: 0;
    max-height: min(72vh, 34rem);
    min-width: 0;
    overflow: auto;
    padding: 0.85rem 1rem;
    position: fixed;
    right: auto;
    text-align: left;
    top: 4.05rem;
    transform: translateX(-50%);
    width: min(1240px, calc(100vw - 2rem));
    z-index: 1001;
}

.header-settings-nav .settings-category[open] > .settings-category-body {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.header-settings-nav .menu-general .settings-category-body {
    width: min(1240px, calc(100vw - 2rem));
}

.header-settings-nav .menu-backup .settings-category-body {
    width: min(48rem, calc(100vw - 2rem));
}

.header-settings-nav .menu-study .settings-category-body,
.header-settings-nav .menu-database .settings-category-body,
.header-settings-nav .menu-users .settings-category-body,
.header-settings-nav .menu-account .settings-category-body {
    width: min(62rem, calc(100vw - 2rem));
}

.header-settings-nav .setting-group,
.header-settings-nav .user-management-grid .setting-group {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    gap: 0.55rem;
    grid-template-columns: none;
    min-width: 0;
}

.header-settings-nav #necessaryWordsSettings:not(.hidden),
.header-settings-nav #grammarSettings:not(.hidden),
.header-settings-nav .managed-users-list {
    display: contents;
}

.header-settings-nav label,
.header-settings-nav .managed-users-heading {
    color: #e2e8f0;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}

.header-settings-nav .managed-users-heading {
    color: #f0b8ff;
    flex-basis: 100%;
    text-align: left;
}

.header-settings-nav input,
.header-settings-nav select,
body[data-theme="dark"] .header-settings-nav input,
body[data-theme="dark"] .header-settings-nav select {
    appearance: none;
    background: #0e141b;
    border: 1px solid #3a4a5f;
    border-radius: 0.28rem;
    color: #f8fafc;
    font-size: 0.92rem;
    font-weight: 700;
    min-height: 2.2rem;
    min-width: 12rem;
    outline: none;
    padding: 0.45rem 0.6rem;
    width: auto;
}

.header-settings-nav input:focus,
.header-settings-nav select:focus {
    border-color: #9d00ff;
    box-shadow: 0 0 0 3px rgba(157, 0, 255, 0.2);
}

.header-settings-nav input[readonly],
body[data-theme="dark"] .header-settings-nav input[readonly] {
    background: #111923;
    color: #aeb9c5;
}

.header-settings-nav .menu-database select {
    min-width: 22rem;
}

.header-settings-nav .menu-account input,
.header-settings-nav .menu-users input,
.header-settings-nav .menu-users select {
    min-width: 15rem;
}

.header-settings-nav .setting-actions,
.header-settings-nav .managed-user-actions {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    justify-content: flex-start;
}

.header-settings-nav button:not(.settings-category-toggle) {
    align-items: center;
    background: #9d00ff;
    border: 0;
    border-radius: 0.32rem;
    color: #fff;
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 850;
    justify-content: center;
    min-height: 2.18rem;
    min-width: 7rem;
    padding: 0.45rem 0.95rem;
    white-space: nowrap;
}

.header-settings-nav button.secondary-button {
    background: #5b6675;
}

.header-settings-nav .auth-status {
    color: #cbd5e1;
    font-size: 0.84rem;
    font-weight: 750;
    min-height: 0;
}

.header-account-controls {
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.36);
    display: flex;
    gap: 0.55rem;
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
    padding-left: 0.85rem;
}

.app-header-user #currentUserLabel {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    max-width: 12rem;
    text-align: left;
}

.header-user-identity {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    line-height: 1;
}

#currentUserRoleLabel {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.header-logout-button {
    color: #fb923c;
    height: 2rem;
    margin-top: 0;
    top: 0;
    width: 2rem;
}

.header-logout-button svg {
    height: 2rem;
    width: 2rem;
}

@media (max-width: 1200px) {
    .app-header-shell,
    .header-settings-nav .settings-category-body,
    body[data-theme="dark"] .header-settings-nav .settings-category-body {
        width: min(1000px, calc(100vw - 1.25rem));
    }

    .header-settings-nav .settings-category-toggle {
        font-size: 0.78rem;
        padding-inline: 0.52rem;
    }

    header h1 {
        font-size: 0.78rem;
    }

    header p {
        font-size: 0.54rem;
    }
}

@media (max-width: 980px) {
    body {
        --app-header-height: 5.35rem;
    }

    header {
        padding: 0.55rem 0.65rem 0;
    }

    .app-header-shell {
        align-items: stretch;
        display: grid;
        gap: 0.45rem;
        grid-template-areas:
            "brand menu"
            "panel panel";
        grid-template-columns: minmax(0, 1fr) auto;
        max-width: 44rem;
        min-height: 0;
        padding: 0.65rem;
        width: min(44rem, calc(100vw - 1rem));
    }

    .app-header-brand {
        grid-area: brand;
        grid-column: auto;
        justify-self: start;
    }

    .header-menu-button {
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0.72rem;
        display: inline-flex;
        grid-area: menu;
        justify-self: end;
    }

    .header-menu-button.hidden {
        display: none !important;
    }

    .app-header-user {
        background: rgba(10, 12, 18, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.85rem;
        display: none;
        flex-direction: column;
        gap: 0.65rem;
        grid-area: panel;
        padding: 0.7rem;
        width: 100%;
    }

    body.mobile-header-open .app-header-user {
        display: flex;
    }

    .header-settings-nav {
        display: grid;
        gap: 0.32rem;
        grid-column: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        order: 1;
        width: 100%;
    }

    .header-settings-nav .settings-category {
        min-width: 0;
        position: static;
    }

    .header-settings-nav .settings-category-toggle {
        border-radius: 0.72rem;
        font-size: 0.76rem;
        min-height: 2rem;
        padding: 0.58rem 0.45rem;
        width: 100%;
    }

    .header-settings-nav .settings-category-body,
    body[data-theme="dark"] .header-settings-nav .settings-category-body {
        left: 50%;
        max-height: min(68vh, 34rem);
        overflow: auto;
        top: 8.45rem;
        width: min(44rem, calc(100vw - 1rem));
    }

    .header-settings-nav .settings-category[open] > .settings-category-body {
        align-items: stretch;
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .header-settings-nav .setting-group,
    .header-settings-nav .user-management-grid .setting-group {
        align-items: stretch;
        flex-direction: column;
        gap: 0.35rem;
    }

    .header-settings-nav input,
    .header-settings-nav select,
    .header-settings-nav .menu-database select,
    .header-settings-nav .menu-account input,
    .header-settings-nav .menu-users input,
    .header-settings-nav .menu-users select {
        min-width: 0;
        width: 100%;
    }

    .header-settings-nav .setting-actions,
    .header-settings-nav .managed-user-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .header-settings-nav button:not(.settings-category-toggle) {
        width: 100%;
    }

    .header-account-controls {
        align-items: center;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        grid-column: auto;
        justify-content: center;
        margin-left: 0;
        order: 2;
        padding: 0.45rem 0 0;
        width: 100%;
    }

    .app-header-user #currentUserLabel {
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 640px) {
    body {
        --app-header-height: 5.2rem;
    }

    .app-header-shell {
        padding: 0.55rem;
    }

    .header-settings-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .header-settings-nav .settings-category[open] > .settings-category-body {
        grid-template-columns: 1fr;
    }

    .header-settings-nav .settings-category-body,
    body[data-theme="dark"] .header-settings-nav .settings-category-body {
        top: 8.15rem;
        width: calc(100vw - 1rem);
    }
}

@media (max-width: 420px) {
    .header-settings-nav {
        grid-template-columns: 1fr;
    }

    .header-user-identity {
        display: none;
    }
}

/* Elevated main content surfaces */
body {
    background:
        radial-gradient(circle at top left, rgba(157, 0, 255, 0.16), transparent 30rem),
        #0d1117;
}

body[data-theme="light"] {
    background:
        radial-gradient(circle at top left, rgba(157, 0, 255, 0.10), transparent 28rem),
        #f5f7fb;
}

main,
.auth-panel {
    background:
        linear-gradient(145deg, rgba(21, 27, 36, 0.96), rgba(16, 22, 31, 0.96));
    border: 1px solid rgba(44, 56, 72, 0.95);
    border-radius: 1.45rem;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 42px rgba(157, 0, 255, 0.10);
    color: #f8fafc;
    overflow: visible;
    position: relative;
}

main {
    flex: 0 0 auto;
    margin: 1.25rem auto 2rem;
    max-width: 900px;
    padding: 1.25rem;
    width: fit-content;
    min-width: min(100%, 42rem);
}

.auth-panel {
    max-width: 520px;
    padding: 1.25rem;
}

main::before,
.auth-panel::before {
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

body[data-theme="light"] main,
body[data-theme="light"] .auth-panel {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.97));
    border-color: #d9e1ee;
    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.80),
        0 0 38px rgba(157, 0, 255, 0.08);
    color: #0f172a;
}

.auth-box,
body[data-theme="dark"] .auth-box {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.auth-box + .auth-box {
    border-top: 1px solid rgba(148, 163, 184, 0.24);
    padding-top: 1rem;
}

#flashcard,
body[data-theme="dark"] #flashcard {
    background:
        linear-gradient(145deg, rgba(23, 29, 36, 0.98), rgba(15, 22, 31, 0.98));
    border: 1px solid #2c3848;
    border-radius: 1.2rem;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    min-height: 9rem;
}

body[data-theme="light"] #flashcard {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border-color: #d9e1ee;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: #0f172a;
}

.search-result-box,
body[data-theme="dark"] .search-result-box,
#noCards {
    background: rgba(15, 22, 31, 0.82);
    border: 1px solid #2c3848;
    border-radius: 1rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

#noCards {
    color: #d8e2ef;
    padding: 1rem;
    text-align: center;
}

body[data-theme="light"] .search-result-box,
body[data-theme="light"] #noCards {
    background: rgba(255, 255, 255, 0.90);
    border-color: #d9e1ee;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
    color: #334155;
}

@media (max-width: 700px) {
    main,
    .auth-panel {
        border-radius: 1rem;
        margin-bottom: 1rem;
        padding: 0.85rem;
        width: calc(100% - 1.5rem);
        min-width: 0;
    }

    #flashcard {
        border-radius: 0.9rem;
        min-height: 8rem;
    }
}