body{

    background:#FFF5F5;

}

.fr-pupil{

    display:flex;

    min-height:100vh;

}

.fr-pupil-sidebar{

    width:260px;

    background:#EF4444;

    color:white;

    padding:40px 30px;

}

.fr-pupil-main{

    flex:1;

    padding:50px;

}

.fr-pupil-logo{

    margin-bottom:50px;

}

.fr-pupil-logo h2{

    color:white;

    margin-top:15px;

}

.fr-pupil-sidebar nav{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.fr-pupil-sidebar nav a{

    color:white;

    text-decoration:none;

    padding:16px 20px;

    border-radius:16px;

    transition:.2s;

}

.fr-pupil-sidebar nav a:hover,

.fr-pupil-sidebar nav a.active{

    background:rgba(255,255,255,.18);

}
.fr-pupil-main {
    min-width: 0;
}

.fr-pupil-dashboard {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.fr-pupil-hero {
    min-height: 290px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 42px;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(220, 38, 38, 0.2);
}

.fr-pupil-hero__content {
    max-width: 620px;
}

.fr-pupil-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 800;
}

.fr-pupil-hero h1 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
}

.fr-pupil-hero p {
    max-width: 520px;
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 17px;
    line-height: 1.6;
}

.fr-pupil-primary-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border-radius: 16px;
    background: #ffffff;
    color: #dc2626;
    text-decoration: none;
    font-weight: 900;
}

.fr-pupil-hero__character {
    width: 180px;
    height: 180px;
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 86px;
}

.fr-pupil-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.8fr);
    gap: 24px;
    margin-top: 24px;
}

.fr-pupil-side-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fr-pupil-panel {
    padding: 26px;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(31, 31, 46, 0.07);
}

.fr-pupil-panel__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.fr-pupil-panel__heading span {
    display: block;
    margin-bottom: 5px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.fr-pupil-panel__heading h2 {
    margin: 0;
    font-size: 23px;
}

.fr-pupil-panel__heading a {
    color: #ef4444;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
}

.fr-pupil-story-card {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 22px;
}

.fr-pupil-story-card img,
.fr-pupil-story-card__placeholder {
    width: 190px;
    height: 180px;
    border-radius: 22px;
    object-fit: cover;
}

.fr-pupil-story-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    font-size: 58px;
}

.fr-pupil-story-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.fr-pupil-level {
    padding: 5px 11px;
    border-radius: 999px;
    background: #dcfce7;
    color: #277542;
    font-size: 12px;
    font-weight: 900;
}

.fr-pupil-story-card h3 {
    margin: 12px 0 8px;
    font-size: 25px;
}

.fr-pupil-story-card p {
    margin: 0 0 16px;
    color: #716b7d;
    line-height: 1.55;
}

.fr-pupil-story-card a {
    color: #ef4444;
    text-decoration: none;
    font-weight: 900;
}

.fr-pupil-goal strong {
    color: #ef4444;
    font-size: 17px;
}

.fr-pupil-progress-bar {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #fee2e2;
}

.fr-pupil-progress-bar span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.fr-pupil-goal p {
    margin: 14px 0 0;
    color: #716b7d;
    font-size: 14px;
}

.fr-pupil-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.fr-pupil-quick-grid a {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 18px;
    background: #fff5f5;
    color: #332f3c;
    text-decoration: none;
    font-weight: 800;
}

.fr-pupil-quick-grid a:hover {
    background: #fee2e2;
    color: #dc2626;
}

.fr-pupil-quick-grid span {
    font-size: 28px;
}

@media (max-width: 950px) {
    .fr-pupil-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .fr-pupil {
        display: block;
    }

    .fr-pupil-sidebar {
        width: auto;
        padding: 18px 16px;
    }

    .fr-pupil-sidebar nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .fr-pupil-sidebar nav a {
        flex: 0 0 auto;
        padding: 12px 15px;
    }

    .fr-pupil-logo {
        display: none;
    }

    .fr-pupil-main {
        padding: 18px 14px 36px;
    }

    .fr-pupil-hero {
        min-height: 0;
        padding: 28px 24px;
        border-radius: 26px;
    }

    .fr-pupil-hero__character {
        display: none;
    }

    .fr-pupil-story-card {
        grid-template-columns: 110px 1fr;
    }

    .fr-pupil-story-card img,
    .fr-pupil-story-card__placeholder {
        width: 110px;
        height: 130px;
        border-radius: 18px;
    }
}

@media (max-width: 520px) {
    .fr-pupil-hero h1 {
        font-size: 36px;
    }

    .fr-pupil-story-card {
        grid-template-columns: 1fr;
    }

    .fr-pupil-story-card img,
    .fr-pupil-story-card__placeholder {
        width: 100%;
        height: 210px;
    }
}
.fr-web-app {
    width: 100%;
    min-height: 100vh;
}

.fr-pupil-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.fr-pupil-page-header {
    margin-bottom: 24px;
    padding: 34px;
    border-radius: 30px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    box-shadow: 0 16px 36px rgba(220, 38, 38, 0.18);
}

.fr-pupil-page-header span {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.fr-pupil-page-header h1 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 48px);
}

.fr-pupil-page-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
}

.fr-pupil-story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.fr-library-card {
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(31, 31, 46, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.fr-library-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(31, 31, 46, 0.12);
}

.fr-library-card__cover {
    position: relative;
    display: block;
    height: 240px;
    overflow: hidden;
    background: #fee2e2;
}

.fr-library-card__cover img,
.fr-library-card__placeholder {
    width: 100%;
    height: 100%;
}

.fr-library-card__cover img {
    object-fit: cover;
}

.fr-library-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 62px;
}

.fr-library-card__level {
    position: absolute;
    top: 14px;
    right: 14px;
    min-width: 42px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #277542;
    font-size: 12px;
    font-weight: 900;
}

.fr-library-card__content {
    padding: 20px;
}

.fr-library-card__content h2 {
    margin: 0 0 8px;
    font-size: 21px;
    line-height: 1.25;
}

.fr-library-card__content p {
    margin: 0 0 18px;
    color: #716b7d;
    font-size: 14px;
}

.fr-library-card__button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 14px;
    background: #ef4444;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
}

.fr-library-card__button:hover {
    background: #dc2626;
}

@media (max-width: 980px) {
    .fr-pupil-story-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .fr-pupil-page-header {
        padding: 26px 22px;
        border-radius: 24px;
    }

    .fr-pupil-story-grid {
        grid-template-columns: 1fr;
    }

    .fr-library-card__cover {
        height: 220px;
    }
}
.fr-reading-page {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.fr-reading-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.fr-reading-topbar a {
    color: #ef4444;
    text-decoration: none;
    font-weight: 900;
}

.fr-reading-topbar span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #dcfce7;
    color: #277542;
    font-size: 12px;
    font-weight: 900;
}

.fr-reading-card {
    overflow: hidden;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(31, 31, 46, 0.09);
}

.fr-reading-cover {
    width: 100%;
    max-height: 470px;
    display: block;
    object-fit: cover;
}

.fr-reading-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 34px 10px;
}

.fr-reading-header h1 {
    margin: 0 0 8px;
    font-size: clamp(32px, 5vw, 48px);
}

.fr-reading-header p {
    margin: 0;
    color: #716b7d;
}

.fr-reading-audio {
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 15px;
    background: #fee2e2;
    color: #dc2626;
    font-weight: 900;
    cursor: pointer;
}

.fr-reading-text {
    padding: 22px 34px 34px;
    color: #302b38;
    font-size: 20px;
    line-height: 1.9;
}

.fr-reading-text p {
    margin: 0 0 24px;
}

.fr-reading-actions {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 0 34px 34px;
}

.fr-reading-actions a {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border-radius: 17px;
    text-decoration: none;
    font-weight: 900;
}

.fr-reading-vocabulary-button {
    background: #fff1dd;
    color: #b8640b;
}

.fr-reading-exercise-button {
    background: #ef4444;
    color: #ffffff;
}

@media (max-width: 650px) {
    .fr-reading-header {
        flex-direction: column;
        padding: 24px 22px 8px;
    }

    .fr-reading-text {
        padding: 18px 22px 28px;
        font-size: 18px;
        line-height: 1.8;
    }

    .fr-reading-actions {
        flex-direction: column;
        padding: 0 22px 26px;
    }

    .fr-reading-actions a {
        width: 100%;
    }
}
.fr-vocab-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.fr-vocab-card {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(31, 31, 46, 0.08);
}

.fr-vocab-card__image {
    width: 130px;
    height: 130px;
    border-radius: 20px;
    object-fit: cover;
    background: #fee2e2;
}

.fr-vocab-card__image--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
}

.fr-vocab-card__content {
    min-width: 0;
}

.fr-vocab-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fr-vocab-card__top h2 {
    margin: 0;
    font-size: 23px;
}

.fr-vocab-card__top span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #277542;
    font-size: 12px;
    font-weight: 900;
}

.fr-vocab-card__translation {
    margin: 8px 0;
    color: #4c4659;
    font-size: 17px;
    font-weight: 700;
}

.fr-vocab-card__example {
    margin: 0 0 12px;
    color: #716b7d;
    font-size: 14px;
    line-height: 1.5;
}

.fr-vocab-audio {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.fr-vocab-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.fr-vocab-actions a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 15px;
    background: #ffffff;
    color: #dc2626;
    text-decoration: none;
    font-weight: 900;
}

.fr-vocab-actions .fr-vocab-start {
    background: #ef4444;
    color: #ffffff;
}

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

@media (max-width: 540px) {
    .fr-vocab-card {
        grid-template-columns: 90px 1fr;
    }

    .fr-vocab-card__image {
        width: 90px;
        height: 90px;
        border-radius: 16px;
    }

    .fr-vocab-actions {
        flex-direction: column;
    }

    .fr-vocab-actions a {
        width: 100%;
    }
}
    .fr-pupil-audio-button {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 18px;
        border: 0;
        border-radius: 15px;
        background: #fee2e2;
        color: #dc2626;
        font-size: 14px;
        font-weight: 900;
        cursor: pointer;
    }
    
    .fr-pupil-audio-button:hover {
        background: #fecaca;
    }
    
    .fr-pupil-exercise-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fr-pupil-question {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    padding: 26px;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(31, 31, 46, 0.08);
}

.fr-pupil-question__number {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 20px;
    font-weight: 900;
}

.fr-pupil-question__type {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff1dd;
    color: #b8640b;
    font-size: 12px;
    font-weight: 900;
}

.fr-pupil-question h2 {
    margin: 12px 0 18px;
    font-size: 24px;
    line-height: 1.35;
}

.fr-pupil-answer-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fr-pupil-answer-option {
    min-height: 58px;
    display: grid;
    grid-template-columns: 24px 34px 1fr;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border: 1px solid #f1dcdc;
    border-radius: 16px;
    background: #fffafa;
    cursor: pointer;
    transition: 0.2s ease;
}

.fr-pupil-answer-option:hover {
    border-color: #ef4444;
    background: #fff1f1;
}

.fr-pupil-answer-option input {
    width: 20px;
    height: 20px;
    accent-color: #ef4444;
}

.fr-pupil-answer-option strong {
    color: #dc2626;
}

.fr-pupil-exercise-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
}

.fr-pupil-exercise-actions a,
.fr-pupil-exercise-actions button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 900;
}

.fr-pupil-exercise-actions a {
    background: #ffffff;
    color: #dc2626;
    text-decoration: none;
}

.fr-pupil-exercise-actions button {
    border: 0;
    background: #ef4444;
    color: #ffffff;
    cursor: pointer;
}

@media (max-width: 600px) {
    .fr-pupil-question {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .fr-pupil-question__number {
        width: 44px;
        height: 44px;
    }

    .fr-pupil-exercise-actions {
        flex-direction: column;
    }

    .fr-pupil-exercise-actions a,
    .fr-pupil-exercise-actions button {
        width: 100%;
    }
}

.fr-inline-word {
    display: inline;
    padding: 0 3px;
    border: 0;
    border-bottom: 2px dashed #ef4444;
    background: transparent;
    color: #dc2626;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.fr-inline-word:hover {
    background: #fee2e2;
}

.fr-modal-open {
    overflow: hidden;
}

.fr-word-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fr-word-modal[hidden] {
    display: none;
}

.fr-word-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(31, 24, 31, 0.55);
    backdrop-filter: blur(5px);
}

.fr-word-modal__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 30px;
    border-radius: 28px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 24px 60px rgba(31, 31, 46, 0.24);
}

.fr-word-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
    font-size: 26px;
    cursor: pointer;
}

.fr-word-modal__image {
    width: 130px;
    height: 130px;
    margin: 0 auto 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: #fff1f1;
    font-size: 52px;
}

.fr-word-modal__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fr-word-modal__card h2 {
    margin: 0 0 8px;
    font-size: 30px;
}

.fr-word-modal__translation {
    margin: 0 0 12px;
    color: #dc2626;
    font-size: 19px;
    font-weight: 800;
}

.fr-word-modal__example {
    margin: 0 0 20px;
    color: #716b7d;
    font-size: 15px;
    line-height: 1.6;
}

.fr-word-modal__audio {
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 15px;
    background: #ef4444;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}
.fr-word-modal__actions{
    display:flex;
    gap:12px;
    margin-top:22px;
}

.fr-word-modal__learn,
.fr-word-modal__next{

    flex:1;

    height:50px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:800;

    font-size:14px;

}

.fr-word-modal__learn{

    background:#22C55E;

    color:white;

}

.fr-word-modal__next{

    background:#EF4444;

    color:white;

}
.fr-quiz-player {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

.fr-quiz-intro,
.fr-quiz-results {
    padding: 48px 34px;
    border-radius: 30px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 16px 38px rgba(31, 31, 46, 0.09);
}

.fr-quiz-intro__icon,
.fr-quiz-results__icon {
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    background: #fee2e2;
    font-size: 54px;
}

.fr-quiz-intro > span,
.fr-quiz-results > span {
    color: #ef4444;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.fr-quiz-intro h1,
.fr-quiz-results h1 {
    margin: 10px 0 12px;
    font-size: clamp(32px, 5vw, 48px);
}

.fr-quiz-intro p,
.fr-quiz-results p {
    max-width: 560px;
    margin: 0 auto 26px;
    color: #716b7d;
    font-size: 16px;
    line-height: 1.6;
}

.fr-quiz-intro button,
.fr-result-actions button,
.fr-result-actions a {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 0;
    border-radius: 16px;
    background: #ef4444;
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
    cursor: pointer;
}

.fr-quiz-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.fr-quiz-topbar button {
    border: 0;
    background: transparent;
    color: #dc2626;
    font-weight: 900;
    cursor: pointer;
}

.fr-quiz-topbar span {
    color: #625b75;
    font-size: 14px;
    font-weight: 800;
}

.fr-quiz-progress {
    height: 12px;
    overflow: hidden;
    margin-bottom: 22px;
    border-radius: 999px;
    background: #fee2e2;
}

.fr-quiz-progress span {
    width: 0;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444, #f97316);
    transition: width 0.25s ease;
}

.fr-quiz-card {
    padding: 34px;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(31, 31, 46, 0.09);
}

.fr-quiz-type {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: #fff1dd;
    color: #b8640b;
    font-size: 12px;
    font-weight: 900;
}

.fr-quiz-card h2 {
    margin: 16px 0 24px;
    font-size: clamp(25px, 4vw, 34px);
    line-height: 1.3;
}

.fr-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.fr-quiz-option {
    min-height: 62px;
    display: grid;
    grid-template-columns: 24px 38px 1fr;
    align-items: center;
    gap: 13px;
    padding: 0 18px;
    border: 2px solid #f2dddd;
    border-radius: 17px;
    background: #fffafa;
    cursor: pointer;
    transition: 0.2s ease;
}

.fr-quiz-option:hover,
.fr-quiz-option.is-selected {
    border-color: #ef4444;
    background: #fff1f1;
}

.fr-quiz-option.is-correct {
    border-color: #22c55e;
    background: #ecfdf3;
}

.fr-quiz-option.is-wrong {
    border-color: #ef4444;
    background: #fef2f2;
}

.fr-quiz-option input {
    width: 20px;
    height: 20px;
    accent-color: #ef4444;
}

.fr-quiz-option strong {
    color: #dc2626;
}

.fr-quiz-feedback {
    margin-top: 20px;
    padding: 18px;
    border-radius: 17px;
}

.fr-quiz-feedback strong,
.fr-quiz-feedback span {
    display: block;
}

.fr-quiz-feedback p {
    margin: 10px 0 0;
}

.fr-quiz-feedback.is-correct {
    background: #ecfdf3;
    color: #15803d;
}

.fr-quiz-feedback.is-wrong {
    background: #fef2f2;
    color: #b91c1c;
}

.fr-quiz-check,
.fr-quiz-next {
    width: 100%;
    min-height: 54px;
    margin-top: 22px;
    border: 0;
    border-radius: 17px;
    background: #ef4444;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.fr-quiz-check:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.fr-result-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 24px 0;
}

.fr-result-score strong {
    font-size: 38px;
}

.fr-result-score span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 18px;
    font-weight: 900;
}

.fr-result-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.fr-result-actions a {
    background: #ffffff;
    color: #dc2626;
    border: 1px solid #fecaca;
}

@media (max-width: 600px) {
    .fr-quiz-intro,
    .fr-quiz-results,
    .fr-quiz-card {
        padding: 26px 20px;
        border-radius: 24px;
    }

    .fr-quiz-option {
        grid-template-columns: 22px 32px 1fr;
        padding: 10px 14px;
    }

    .fr-result-actions {
        flex-direction: column;
    }

    .fr-result-actions button,
    .fr-result-actions a {
        width: 100%;
    }
}
.fr-progress-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.fr-progress-card {
    padding: 24px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(31, 31, 46, 0.08);
}

.fr-progress-card__icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 17px;
    background: #fee2e2;
    font-size: 27px;
}

.fr-progress-card span {
    display: block;
    margin-bottom: 8px;
    color: #716b7d;
    font-size: 13px;
    font-weight: 800;
}

.fr-progress-card strong {
    color: #dc2626;
    font-size: 34px;
}

.fr-progress-history {
    margin-top: 24px;
    padding: 26px;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(31, 31, 46, 0.08);
}

.fr-progress-result-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fr-progress-result {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 18px;
    background: #fff7f7;
}

.fr-progress-result__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #fee2e2;
    font-size: 25px;
}

.fr-progress-result__content h3 {
    margin: 0 0 5px;
    font-size: 17px;
}

.fr-progress-result__content p {
    margin: 0 0 4px;
    color: #625b75;
    font-size: 14px;
}

.fr-progress-result__content small {
    color: #918a9b;
}

.fr-progress-result__score {
    color: #dc2626;
    font-size: 22px;
}

@media (max-width: 950px) {
    .fr-progress-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .fr-progress-grid {
        grid-template-columns: 1fr;
    }

    .fr-progress-result {
        grid-template-columns: 46px 1fr;
    }

    .fr-progress-result__score {
        grid-column: 2;
    }
}
.fr-rewards-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.fr-rewards-summary article {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(31, 31, 46, 0.08);
}

.fr-rewards-summary article > span {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #fff1dd;
    font-size: 29px;
}

.fr-rewards-summary small,
.fr-rewards-summary strong {
    display: block;
}

.fr-rewards-summary small {
    margin-bottom: 5px;
    color: #716b7d;
    font-size: 13px;
    font-weight: 800;
}

.fr-rewards-summary strong {
    color: #dc2626;
    font-size: 29px;
}

.fr-rewards-section {
    padding: 26px;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(31, 31, 46, 0.08);
}

.fr-badge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.fr-badge-card {
    position: relative;
    padding: 24px;
    border: 1px solid #f0e4e4;
    border-radius: 23px;
    background: #fffafa;
}

.fr-badge-card.is-locked {
    opacity: 0.72;
}

.fr-badge-card.is-unlocked {
    border-color: #facc15;
    background: #fffdf1;
}

.fr-badge-card__icon {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 21px;
    background: #fee2e2;
    font-size: 35px;
}

.fr-badge-card.is-unlocked .fr-badge-card__icon {
    background: #fef3c7;
}

.fr-badge-card__status {
    position: absolute;
    top: 18px;
    right: 18px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #f1eeee;
    color: #77717e;
    font-size: 11px;
    font-weight: 900;
}

.fr-badge-card.is-unlocked .fr-badge-card__status {
    background: #dcfce7;
    color: #15803d;
}

.fr-badge-card h3 {
    margin: 0 0 8px;
    font-size: 19px;
}

.fr-badge-card p {
    min-height: 44px;
    margin: 0 0 18px;
    color: #716b7d;
    font-size: 14px;
    line-height: 1.55;
}

.fr-badge-progress > div {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #f2eaea;
}

.fr-badge-progress > div span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #ef4444;
}

.fr-badge-progress small {
    display: block;
    margin-top: 7px;
    color: #8b8493;
    font-size: 12px;
    font-weight: 800;
}

.fr-badge-complete {
    color: #15803d;
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 950px) {
    .fr-badge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .fr-rewards-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .fr-badge-grid {
        grid-template-columns: 1fr;
    }
}
.fr-profile-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.fr-profile-card {
    position: sticky;
    top: 24px;
    padding: 30px;
    border-radius: 28px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 14px 34px rgba(31, 31, 46, 0.08);
}

.fr-profile-avatar {
    width: 140px;
    height: 140px;
    margin-bottom: 18px;
    border: 6px solid #fee2e2;
    border-radius: 50%;
    object-fit: cover;
}

.fr-profile-card h2 {
    margin: 0 0 7px;
    font-size: 25px;
}

.fr-profile-card p {
    margin: 0 0 14px;
    color: #716b7d;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fr-profile-role {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 900;
}

.fr-profile-logout {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    border-radius: 15px;
    background: #fee2e2;
    color: #dc2626;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
}

.fr-profile-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.fr-profile-level,
.fr-profile-account {
    padding: 28px;
    border-radius: 27px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(31, 31, 46, 0.08);
}

.fr-profile-level__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.fr-profile-level__top span {
    display: block;
    margin-bottom: 7px;
    color: #716b7d;
    font-size: 13px;
    font-weight: 800;
}

.fr-profile-level__top h2 {
    margin: 0;
    color: #dc2626;
    font-size: 40px;
}

.fr-profile-level__top strong {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    background: #fff1dd;
    color: #b8640b;
}

.fr-profile-level__bar {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #fee2e2;
}

.fr-profile-level__bar span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.fr-profile-level > p {
    margin: 13px 0 0;
    color: #716b7d;
    font-size: 14px;
}

.fr-profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.fr-profile-stats article {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(31, 31, 46, 0.08);
}

.fr-profile-stats article > span {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #fee2e2;
    font-size: 28px;
}

.fr-profile-stats small,
.fr-profile-stats strong {
    display: block;
}

.fr-profile-stats small {
    margin-bottom: 5px;
    color: #716b7d;
    font-size: 12px;
    font-weight: 800;
}

.fr-profile-stats strong {
    color: #dc2626;
    font-size: 27px;
}

.fr-profile-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid #f1e7e7;
}

.fr-profile-info-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.fr-profile-info-row > span {
    color: #716b7d;
    font-size: 14px;
}

.fr-profile-info-row strong {
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 850px) {
    .fr-profile-layout {
        grid-template-columns: 1fr;
    }

    .fr-profile-card {
        position: static;
    }
}

@media (max-width: 560px) {
    .fr-profile-stats {
        grid-template-columns: 1fr;
    }

    .fr-profile-level__top {
        flex-direction: column;
    }

    .fr-profile-info-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .fr-profile-info-row strong {
        text-align: left;
    }
}

.fr-profile-card{
    position:relative;
}

.fr-profile-edit-button{

    position:absolute;

    top:18px;

    right:18px;

    border:none;

    background:#fee2e2;

    color:#dc2626;

    border-radius:12px;

    padding:8px 14px;

    cursor:pointer;

    font-weight:700;

}

.fr-profile-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.fr-profile-modal__dialog{

    width:min(520px,92vw);

    background:white;

    border-radius:28px;

    padding:32px;

    position:relative;

}

.fr-profile-modal__close{

    position:absolute;

    top:16px;

    right:16px;

    border:none;

    background:none;

    font-size:20px;

    cursor:pointer;

}

.fr-profile-avatar-picker{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

    margin:24px 0;

}

.fr-profile-avatar-picker button{

    height:70px;

    border:none;

    border-radius:18px;

    background:#fff3f3;

    font-size:34px;

    cursor:pointer;

}

.fr-profile-avatar-picker button:hover{

    background:#fee2e2;

}
.fr-profile-avatar--emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    background: #fff1f1;
    font-size: 68px;
}

.fr-profile-avatar-picker button.is-selected {
    outline: 3px solid #ef4444;
    background: #fee2e2;
    transform: translateY(-2px);
}

.fr-profile-modal[hidden] {
    display: none;
}

.fr-profile-modal .fr-save:disabled {
    opacity: 0.6;
    cursor: wait;
}
/* Extended quiz activity types */
.fr-quiz-match-row {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(180px, 1.2fr);
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid #f2dddd;
    border-radius: 17px;
    background: #fffafa;
}

.fr-quiz-match-row strong {
    color: #352f3f;
    font-size: 16px;
}

.fr-quiz-match-row select {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid #ead5d5;
    border-radius: 13px;
    background: #fff;
    font: inherit;
}

.fr-quiz-match-row select.is-correct {
    border-color: #22c55e;
    background: #ecfdf3;
}

.fr-quiz-match-row select.is-wrong {
    border-color: #ef4444;
    background: #fef2f2;
}

.fr-quiz-order-item {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 10px 14px;
    border: 2px solid #f2dddd;
    border-radius: 17px;
    background: #fffafa;
}

.fr-quiz-order-item > strong {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fee2e2;
    color: #dc2626;
}

.fr-quiz-order-item.is-correct {
    border-color: #22c55e;
    background: #ecfdf3;
}

.fr-quiz-order-item.is-wrong {
    border-color: #ef4444;
    background: #fef2f2;
}

.fr-quiz-order-controls {
    display: flex;
    gap: 6px;
}

.fr-quiz-order-controls button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 19px;
    font-weight: 900;
    cursor: pointer;
}

.fr-quiz-order-controls button:disabled {
    opacity: .35;
    cursor: default;
}

@media (max-width: 560px) {
    .fr-quiz-match-row {
        grid-template-columns: 1fr;
    }

    .fr-quiz-order-item {
        grid-template-columns: 38px 1fr;
    }

    .fr-quiz-order-controls {
        grid-column: 2;
    }
}