﻿.frontend-layout {
    --frontend-bg: #0b0f1d;
    --frontend-bg-soft: #151a2c;
    --frontend-panel: #232944;
    --frontend-text: #182038;
    --frontend-muted: #65708a;
    --frontend-line: #dfe3ec;
    --frontend-orange: #ef7542;
    --frontend-orange-dark: #d95731;
    --frontend-cyan: #18a9a7;
    --frontend-gold: #d6a72f;
    --frontend-white: #ffffff;
    --frontend-max-width: 1180px;
}

.frontend-layout,
.frontend-layout * {
    box-sizing: border-box;
}

.frontend-layout {
    min-height: 100vh;
    margin: 0;
    color: var(--frontend-text);
    background:
        radial-gradient(circle at 12% 8%, rgba(240, 123, 63, .28), transparent 25rem),
        radial-gradient(circle at 88% 30%, rgba(52, 214, 208, .24), transparent 30rem),
        radial-gradient(circle at 50% 90%, rgba(227, 94, 88, .16), transparent 28rem),
        linear-gradient(145deg, #111729 0%, var(--frontend-bg) 48%, var(--frontend-bg-soft) 100%);
    background-attachment: fixed;
    font-family: "Microsoft JhengHei", "Microsoft JhengHei UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

.frontend-layout a {
    color: inherit;
}

.frontend-layout button,
.frontend-layout input,
.frontend-layout select,
.frontend-layout textarea {
    font: inherit;
}

.frontend-layout__masthead {
    display: flex;
    align-items: center;
    width: min(var(--frontend-max-width), calc(100% - 40px));
    min-height: 74px;
    margin: 22px auto 0;
    padding: 12px 18px;
    color: #fff;
    background: linear-gradient(180deg, rgba(29, 35, 58, .88), rgba(15, 20, 38, .78));
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .09);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    gap: 18px;
}

.frontend-layout__header {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
}

.frontend-layout__brand-mark {
    width: 10px;
    height: 38px;
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--frontend-gold), var(--frontend-orange) 52%, var(--frontend-cyan));
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(240, 123, 63, .35);
}

.frontend-layout__activity-name {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3vw, 28px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .04em;
}

.frontend-layout__activity-name a {
    color: inherit;
    text-decoration: none;
}

.frontend-layout__activity-name a:hover,
.frontend-layout__activity-name a:focus-visible {
    color: #fff4dc;
}

.frontend-layout__current-user {
    margin: 0 0 0 auto;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.frontend-layout__current-user:hover,
.frontend-layout__current-user:focus-visible {
    color: #fff4dc;
    text-decoration: underline;
}

.frontend-layout__navigation {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.frontend-layout__logout {
    margin: 0;
}

.frontend-layout__logout button {
    min-height: 40px;
    padding: 7px 16px;
    color: #fff;
    background: linear-gradient(135deg, #f8a24f, var(--frontend-orange-dark));
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(230, 85, 68, .26);
    font-weight: 700;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.frontend-layout__logout button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(230, 85, 68, .34);
}

.frontend-layout__main {
    width: min(var(--frontend-max-width), calc(100% - 40px));
    min-height: 460px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px);
    background: var(--frontend-white);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 28px 68px rgba(0, 0, 0, .3);
}

.frontend-layout__footer {
    width: min(var(--frontend-max-width), calc(100% - 40px));
    min-height: 52px;
    margin: 0 auto;
}

.frontend-layout :focus-visible {
    outline: 3px solid rgba(52, 214, 208, .65);
    outline-offset: 3px;
}

.frontend-layout--anonymous .frontend-layout__navigation:empty {
    display: none;
}

/* Existing shared frontend components */
.frontend-layout .register-module__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.frontend-layout .frontend-layout__page-description {
    margin: 18px auto;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(30, 38, 64, .08);
    /*border: 1px solid var(--frontend-line);*/
    border-radius: 12px;
}

.frontend-layout .register-module__card {
    display: block;
    width: 18rem;
    min-height: 12rem;
    padding: 1.5rem;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 1rem;
    text-decoration: none;
}

.frontend-layout .register-module__card--disabled {
    color: #777;
    background: #e5e5e5;
}

.frontend-layout .team-module__dialog {
    width: calc(100% - 2rem);
    max-width: 40rem;
    max-height: 90vh;
    overflow: auto;
}

.frontend-layout .team-module__dialog::backdrop {
    background: rgba(0, 0, 0, .5);
}

/* User login */
.frontend-layout .user-module--login {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(390px, 1.1fr);
    min-height: 590px;
    overflow: hidden;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(25, 32, 56, .12);
}

.frontend-layout .user-module__visual {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: var(--frontend-panel);
}

.frontend-layout .user-module__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% center;
}

.frontend-layout .user-module__visual picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.frontend-layout .user-module__visual-accent {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 1;
    width: 86px;
    height: 5px;
    background: linear-gradient(90deg, var(--frontend-orange), var(--frontend-gold), var(--frontend-cyan));
    border-radius: 999px;
}

.frontend-layout .user-module__login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 5vw, 62px);
}

.frontend-layout .user-module__login-heading {
    margin-bottom: 26px;
}

.frontend-layout .user-module__eyebrow {
    margin: 0 0 6px;
    color: var(--frontend-orange-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.frontend-layout .user-module__login-heading h2,
.frontend-layout .user-module__hero-copy h2 {
    margin: 0;
    color: var(--frontend-text);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.3;
}

.frontend-layout .user-module__login-heading > p:last-child {
    margin: 8px 0 0;
    color: var(--frontend-muted);
}

.frontend-layout .user-module__login form > div:not(.validation-summary-errors) {
    margin-bottom: 17px;
}

.frontend-layout .user-module__login label {
    display: block;
    margin-bottom: 6px;
    color: #303950;
    font-size: 14px;
    font-weight: 700;
}

.frontend-layout .user-module__login input[type="text"],
.frontend-layout .user-module__login input[type="password"] {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    color: var(--frontend-text);
    background: #f7f8fb;
    border: 1px solid #cfd5e2;
    border-radius: 8px;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.frontend-layout .user-module__login input[type="text"]:focus,
.frontend-layout .user-module__login input[type="password"]:focus {
    background: #fff;
    border-color: var(--frontend-cyan);
    box-shadow: 0 0 0 3px rgba(24, 169, 167, .14);
    outline: 0;
}

.frontend-layout .user-module__captcha-controls,
.frontend-layout .register-module__captcha-controls {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(140px, 180px) 44px;
    align-items: center;
    gap: 8px;
}

.frontend-layout .user-module__captcha-controls img,
.frontend-layout .register-module__captcha-controls img {
    width: 100%;
    height: 44px;
    object-fit: contain;
    background: #f7f8fb;
    border: 1px solid #d9deea;
    border-radius: 8px;
}

.frontend-layout .user-module__captcha-controls button,
.frontend-layout .register-module__captcha-controls button {
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--frontend-cyan);
    background: #eaf8f7;
    border: 1px solid #b9e3e1;
    border-radius: 8px;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
}

.frontend-layout .user-module__login-submit button {
    width: 100%;
    min-height: 46px;
    color: #fff;
    background: linear-gradient(135deg, #f49b45, var(--frontend-orange-dark));
    border: 0;
    border-radius: 9px;
    box-shadow: 0 10px 22px rgba(230, 85, 68, .24);
    font-weight: 800;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.frontend-layout .user-module__login-submit button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgba(230, 85, 68, .32);
}

.frontend-layout .user-module__login-links {
    margin-top: -4px;
    text-align: right;
}

.frontend-layout .user-module__login-links a {
    color: #237c82;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.frontend-layout .user-module__register {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    margin-top: 24px;
    border-top: 1px solid var(--frontend-line);
    gap: 16px;
}

.frontend-layout .user-module__register h3,
.frontend-layout .user-module__register p {
    margin: 0;
}

.frontend-layout .user-module__register h3 {
    color: var(--frontend-text);
    font-size: 16px;
}

.frontend-layout .user-module__register p {
    color: var(--frontend-muted);
    font-size: 13px;
}

.frontend-layout .user-module__register > a {
    flex: 0 0 auto;
    padding: 8px 14px;
    color: var(--frontend-orange-dark);
    border: 1px solid #ed9a78;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.frontend-layout .field-validation-error,
.frontend-layout .validation-summary-errors {
    color: #b72e2e;
    font-size: 13px;
}

.frontend-layout .validation-summary-errors {
    padding: 11px 14px;
    margin-bottom: 18px;
    background: #fff3f2;
    border: 1px solid #f3c7c3;
    border-radius: 8px;
}

.frontend-layout .validation-summary-errors:not(:has(li:not(:empty))) {
    display: none;
}

.frontend-layout .validation-summary-errors ul {
    padding-left: 20px;
    margin: 0;
}

.frontend-layout .input-validation-error {
    border-color: #dc5454 !important;
}

/* User index */
.frontend-layout .user-module__hero {
    position: relative;
    min-height: 220px;
    margin-bottom: 32px;
    overflow: hidden;
    background: var(--frontend-panel);
    border-radius: 14px;
}

.frontend-layout .user-module__hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 57%;
}

.frontend-layout .user-module__hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 15, 29, .84), rgba(11, 15, 29, .3) 62%, rgba(11, 15, 29, .08));
    content: "";
}

.frontend-layout .user-module__hero-copy {
    position: relative;
    z-index: 1;
    max-width: 520px;
    padding: clamp(30px, 5vw, 54px);
    color: #fff;
}

.frontend-layout .user-module__hero-copy .user-module__eyebrow {
    color: #ffc365;
}

.frontend-layout .user-module__hero-copy h2 {
    color: #fff;
}

.frontend-layout .user-module__hero-copy > p:last-child {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .82);
}

.frontend-layout .user-module__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.frontend-layout .user-module__card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 210px;
    flex-direction: column;
    padding: 24px;
    overflow: hidden;
    color: var(--frontend-text);
    background: #fff;
    border: 1px solid var(--frontend-line);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(30, 38, 64, .08);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.frontend-layout .user-module__card--available:hover {
    border-color: rgba(24, 169, 167, .52);
    box-shadow: 0 16px 34px rgba(24, 77, 86, .14);
    transform: translateY(-3px);
}

.frontend-layout .user-module__card-link {
    position: absolute;
    z-index: 1;
    inset: 0;
}

.frontend-layout .user-module__card-accent {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--frontend-orange), var(--frontend-gold), var(--frontend-cyan));
}

.frontend-layout .user-module__card h3 {
    margin: 5px 36px 12px 0;
    color: var(--frontend-text);
    font-size: 20px;
    line-height: 1.4;
}

.frontend-layout .user-module__period {
    margin: 0 0 18px;
    color: var(--frontend-muted);
    font-size: 14px;
}

.frontend-layout .user-module__description {
    position: relative;
    z-index: 2;
    margin: 0 0 18px;
    overflow-wrap: anywhere;
}

.frontend-layout .user-module__card--available .user-module__description,
.frontend-layout .user-module__card--available .user-module__description * {
    pointer-events: none;
}

.frontend-layout .user-module__status {
    align-self: flex-start;
    padding: 4px 10px;
    margin: auto 0 0;
    color: #0c7473;
    background: #e4f7f5;
    border: 1px solid #b9e6e2;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.frontend-layout .user-module__status--warning {
    color: #a33732;
    background: #fff1ef;
    border-color: #f2c3bf;
}

.frontend-layout .user-module__card-arrow {
    position: absolute;
    z-index: 2;
    top: 21px;
    right: 22px;
    color: var(--frontend-orange);
    font-size: 26px;
    line-height: 1;
    pointer-events: none;
}

.frontend-layout .user-module__card--disabled {
    color: #7b8497;
    background: #f1f2f5;
    border-color: #e2e5eb;
    box-shadow: none;
}

.frontend-layout .user-module__card--disabled .user-module__card-accent {
    background: #aeb5c2;
}

.frontend-layout .user-module__card--disabled h3 {
    color: #646d80;
}

.frontend-layout .user-module__card--disabled .user-module__status {
    color: #697184;
    background: #e4e6eb;
    border-color: #d2d5dc;
}

.frontend-layout .user-module__card--disabled .user-module__status--warning {
    color: #a33732;
    background: #fff1ef;
    border-color: #f2c3bf;
}

/* Shared frontend page components */
.frontend-layout .register-module,
.frontend-layout .user-module,
.frontend-layout .team-module,
.frontend-layout .topic-module,
.frontend-layout .results-module {
    width: 100%;
}

.frontend-layout .register-module__heading,
.frontend-layout .user-module__heading,
.frontend-layout .team-module__invitation-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 22px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--frontend-line);
    gap: 10px 16px;
}

.frontend-layout .frontend-layout__function-heading {
    padding-bottom: 22px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--frontend-line);
}

.frontend-layout .frontend-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--frontend-muted);
    font-size: 14px;
}

.frontend-layout .frontend-breadcrumb__link {
    color: var(--frontend-orange-dark);
    font-weight: 700;
}

.frontend-layout .frontend-breadcrumb__separator {
    color: var(--frontend-line);
}

.frontend-layout .register-module__heading h1,
.frontend-layout .user-module__heading h1,
.frontend-layout .team-module__invitation-heading h1,
.frontend-layout .frontend-layout__function-heading h1 {
    flex: 1 1 320px;
    margin: 0;
    color: var(--frontend-text);
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.3;
}

.frontend-layout .frontend-layout__function-heading h1 {
    margin-top: 10px;
}

.frontend-layout .frontend-layout__function-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 12px 18px;
}

.frontend-layout .frontend-layout__function-title h1 {
    margin-top: 0;
}

.frontend-layout .frontend-layout__home-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 7px 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--frontend-orange), var(--frontend-orange-dark));
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(230, 85, 68, .2);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    gap: 7px;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.frontend-layout .frontend-layout__home-link:hover,
.frontend-layout .frontend-layout__home-link:focus-visible {
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(230, 85, 68, .28);
}

.frontend-layout .frontend-module__status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.frontend-layout .frontend-module__status > p:first-child {
    padding: 5px 11px;
    margin: 0;
    color: #0d7775;
    background: #e7f8f6;
    border: 1px solid #bde8e4;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.frontend-layout .frontend-module__status--complete > p:first-child {
    color: #0c7473;
    background: #e4f7f5;
    border-color: #b9e6e2;
}

.frontend-layout .frontend-module__status--warning > p:first-child {
    color: #a33732;
    background: #fff1ef;
    border-color: #f2c3bf;
}

.frontend-layout .register-module__eyebrow,
.frontend-layout .team-module__eyebrow {
    margin: 0 0 7px;
    color: var(--frontend-orange-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.frontend-layout .register-module h2,
.frontend-layout .team-module h2,
.frontend-layout .topic-module h2,
.frontend-layout .results-module h2 {
    color: var(--frontend-text);
}

.frontend-layout .register-module__registration,
.frontend-layout .user-module__forget,
.frontend-layout .user-module__reset {
    width: min(100%, 720px);
    padding: clamp(22px, 4vw, 38px);
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--frontend-line);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(30, 38, 64, .09);
}

.frontend-layout .register-module__top-description,
.frontend-layout .register-module__bottom-description,
.frontend-layout .register-module__privacy-consent label {
    white-space: pre-line;
}

/*
.frontend-layout .register-module__top-description,
.frontend-layout .register-module__bottom-description {
    padding: 14px 16px;
    color: #4f586d;
    background: #f7f8fb;
    border-left: 4px solid var(--frontend-cyan);
    border-radius: 8px;
    line-height: 1.75;
}
*/

.frontend-layout .register-module__top-description {
    margin-bottom: 24px;
}

.frontend-layout .register-module__bottom-description {
    margin-top: 24px;
}

.frontend-layout .register-module__registration form,
.frontend-layout .user-module__forget form,
.frontend-layout .user-module__reset form,
.frontend-layout .team-profile-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.frontend-layout .register-module__registration form > .validation-summary-errors,
.frontend-layout .user-module__forget form > .validation-summary-errors,
.frontend-layout .user-module__reset form > .validation-summary-errors,
.frontend-layout .register-module__privacy-consent,
.frontend-layout .register-module__captcha,
.frontend-layout .register-module__registration-submit,
.frontend-layout .user-module__forget form > div,
.frontend-layout .user-module__reset form > div,
.frontend-layout .team-profile-form > button {
    grid-column: 1 / -1;
}

.frontend-layout .register-module label,
.frontend-layout .user-module__forget label,
.frontend-layout .user-module__reset label,
.frontend-layout .team-module label,
.frontend-layout .topic-module label,
.frontend-layout .results-module label {
    display: block;
    margin-bottom: 6px;
    color: #303950;
    font-size: 14px;
    font-weight: 700;
}

.frontend-layout .register-module input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.frontend-layout .user-module__forget input:not([type="hidden"]),
.frontend-layout .user-module__reset input:not([type="hidden"]),
.frontend-layout .team-module input:not([type="hidden"]):not([type="checkbox"]),
.frontend-layout .team-module select,
.frontend-layout .topic-module input:not([type="hidden"]):not([type="radio"]),
.frontend-layout .results-module input:not([type="hidden"]):not([type="file"]),
.frontend-layout .results-module select,
.frontend-layout .results-module textarea {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    color: var(--frontend-text);
    background: #f7f8fb;
    border: 1px solid #cfd5e2;
    border-radius: 8px;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.frontend-layout .register-module input:focus,
.frontend-layout .user-module__forget input:focus,
.frontend-layout .user-module__reset input:focus,
.frontend-layout .team-module input:focus,
.frontend-layout .team-module select:focus,
.frontend-layout .topic-module input:focus,
.frontend-layout .results-module input:focus,
.frontend-layout .results-module select:focus,
.frontend-layout .results-module textarea:focus {
    background: #fff;
    border-color: var(--frontend-cyan);
    box-shadow: 0 0 0 3px rgba(24, 169, 167, .14);
    outline: 0;
}

.frontend-layout .team-module input[readonly] {
    color: #687187;
    background: #eceef3;
}

.frontend-layout .register-module input[type="checkbox"],
.frontend-layout .team-module input[type="checkbox"],
.frontend-layout .topic-module input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--frontend-cyan);
}

.frontend-layout .register-module__privacy-consent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #f7f8fb;
    border: 1px solid #e2e5ed;
    border-radius: 8px;
    gap: 7px;
}

.frontend-layout .register-module__privacy-consent label {
    margin: 0;
}

.frontend-layout .register-module__field-help,
.frontend-layout .register-module__captcha-help,
.frontend-layout .user-module__captcha-help,
.frontend-layout .user-module__field-help {
    margin: 7px 0 0;
    color: var(--frontend-muted);
    font-size: 13px;
    line-height: 1.55;
}

.frontend-layout .register-module__captcha-help,
.frontend-layout .user-module__captcha-help {
    margin: -2px 0 2px;
}

.frontend-layout .register-module__captcha > .field-validation-error,
.frontend-layout .user-module__captcha > .field-validation-error {
    display: block;
    margin-top: 6px;
}

.frontend-layout .register-module__captcha-controls .register-module__captcha-refresh {
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--frontend-cyan);
    background: #eaf8f7;
    border: 1px solid #b9e3e1;
    border-radius: 8px;
    font-size: 22px;
    font-weight: 800;
}

.frontend-layout .register-module button,
.frontend-layout .user-module__forget button,
.frontend-layout .user-module__reset button,
.frontend-layout .team-module button,
.frontend-layout .topic-module button,
.frontend-layout .results-module button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 16px;
    color: #fff;
    background: linear-gradient(135deg, #f49b45, var(--frontend-orange-dark));
    border: 0;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(230, 85, 68, .2);
    font-weight: 800;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.frontend-layout .register-module button:hover,
.frontend-layout .user-module__forget button:hover,
.frontend-layout .user-module__reset button:hover,
.frontend-layout .team-module button:hover,
.frontend-layout .topic-module button:hover,
.frontend-layout .results-module button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 11px 22px rgba(230, 85, 68, .28);
}

.frontend-layout .register-module__registration-submit button,
.frontend-layout .user-module__forget-submit button,
.frontend-layout .user-module__reset-submit button {
    width: 100%;
}

.frontend-layout .register-module__login-link,
.frontend-layout .user-module__forget > p:last-child {
    margin: 20px 0 0;
    text-align: center;
}

.frontend-layout .register-module__login-link a,
.frontend-layout .user-module__forget > p:last-child a {
    color: #217d82;
    font-weight: 700;
    text-decoration: none;
}

/* Consent document */
.frontend-layout .consent-module {
    width: min(100%, 960px);
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--frontend-line);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(30, 38, 64, .09);
}

.frontend-layout .consent-module__heading {
    padding: clamp(24px, 4vw, 38px);
    background: linear-gradient(135deg, #fff5ec, #fff 58%, #effaf9);
    border-bottom: 1px solid var(--frontend-line);
}

.frontend-layout .consent-module__eyebrow {
    margin: 0 0 7px;
    color: var(--frontend-orange-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.frontend-layout .consent-module__heading h1 {
    margin: 0;
    color: var(--frontend-text);
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.35;
}

.frontend-layout .consent-module__content {
    padding: clamp(24px, 5vw, 48px);
    overflow-x: auto;
    color: #343c51;
    line-height: 1.85;
}

.frontend-layout .consent-module__content img {
    max-width: 100%;
    height: auto;
}

.frontend-layout .consent-module__content a {
    color: #147d82;
    font-weight: 700;
}

.frontend-layout .consent-module__actions {
    display: flex;
    justify-content: flex-end;
    padding: 18px clamp(24px, 5vw, 48px);
    background: #f7f8fb;
    border-top: 1px solid var(--frontend-line);
}

.frontend-layout .consent-module__back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 7px 15px;
    gap: 7px;
    color: #fff;
    background: linear-gradient(135deg, var(--frontend-orange), var(--frontend-orange-dark));
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(218, 94, 42, .2);
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.frontend-layout .consent-module__back-link:hover,
.frontend-layout .consent-module__back-link:focus {
    color: #fff;
    box-shadow: 0 10px 22px rgba(218, 94, 42, .28);
    text-decoration: none;
    transform: translateY(-1px);
}

/* User profile */
.frontend-layout .user-profile-module {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.frontend-layout .user-profile-module__basic-info,
.frontend-layout .user-profile-module__password-reset {
    padding: clamp(22px, 4vw, 32px);
    background: #fff;
    border: 1px solid var(--frontend-line);
    border-top: 4px solid var(--frontend-cyan);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(30, 38, 64, .07);
}

.frontend-layout .user-profile-module__password-reset {
    border-top-color: var(--frontend-orange);
}

.frontend-layout .user-profile-module h2 {
    margin: 0 0 18px;
    color: var(--frontend-text);
    font-size: 21px;
}

.frontend-layout .user-profile-module dl {
    display: grid;
    grid-template-columns: minmax(80px, .35fr) minmax(0, 1fr);
    margin: 0;
}

.frontend-layout .user-profile-module dt,
.frontend-layout .user-profile-module dd {
    padding: 13px 0;
    border-bottom: 1px solid #e7e9ef;
}

.frontend-layout .user-profile-module dt {
    color: var(--frontend-muted);
    font-size: 14px;
    font-weight: 700;
}

.frontend-layout .user-profile-module dd {
    margin: 0;
    color: var(--frontend-text);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.frontend-layout .user-profile-module__password-reset > p {
    margin: 0 0 18px;
    color: var(--frontend-muted);
    line-height: 1.65;
}

.frontend-layout .user-profile-module__password-reset-message {
    padding: 11px 13px;
    margin-bottom: 16px;
    color: #0a6d60;
    background: #e8f8f3;
    border: 1px solid #bde7db;
    border-radius: 8px;
}

.frontend-layout .user-profile-module__password-reset form {
    margin: 0;
}

.frontend-layout .user-profile-module__password-reset button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 16px;
    color: #fff;
    background: linear-gradient(135deg, #f49b45, var(--frontend-orange-dark));
    border: 0;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(230, 85, 68, .2);
    font-weight: 800;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.frontend-layout .user-profile-module__password-reset button:hover,
.frontend-layout .user-profile-module__password-reset button:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 11px 22px rgba(230, 85, 68, .28);
}

.frontend-layout .register-module__email-sent,
.frontend-layout .register-module__message,
.frontend-layout .register-module__unavailable,
.frontend-layout .user-module__message,
.frontend-layout .team-module__message-card,
.frontend-layout .team-module__unavailable,
.frontend-layout .topic-module__unavailable,
.frontend-layout .results-module__unavailable {
    width: min(100%, 720px);
    padding: clamp(30px, 6vw, 56px);
    margin: 24px auto;
    text-align: center;
    background: linear-gradient(180deg, #fff, #fafbfc);
    border: 1px solid var(--frontend-line);
    border-top: 5px solid var(--frontend-cyan);
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(30, 38, 64, .1);
}

.frontend-layout .register-module__message--error,
.frontend-layout .user-module__message--error,
.frontend-layout .team-module__message-card--error,
.frontend-layout .register-module__unavailable,
.frontend-layout .team-module__unavailable,
.frontend-layout .topic-module__unavailable,
.frontend-layout .results-module__unavailable {
    border-top-color: var(--frontend-orange);
}

.frontend-layout .register-module__email-sent h1,
.frontend-layout .register-module__message h1,
.frontend-layout .register-module__unavailable h1,
.frontend-layout .user-module__message h1,
.frontend-layout .team-module__message-card h1,
.frontend-layout .team-module__unavailable h1,
.frontend-layout .topic-module__unavailable h1,
.frontend-layout .results-module__unavailable h1 {
    margin: 0 0 14px;
    color: var(--frontend-text);
    font-size: clamp(25px, 3vw, 34px);
}

.frontend-layout .register-module__email-sent a,
.frontend-layout .register-module__message a,
.frontend-layout .user-module__message a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 7px 15px;
    color: #fff;
    background: var(--frontend-cyan);
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
}

.frontend-layout .topic-module__messages:empty {
    display: none;
}

.frontend-layout .team-module__message,
.frontend-layout .topic-module__message,
.frontend-layout .results-module__message {
    width: 100%;
    padding: 10px 13px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

.frontend-layout .team-module__message--success,
.frontend-layout .topic-module__message--success,
.frontend-layout .results-module__message--success {
    color: #0a6d60 !important;
    background: #e8f8f3 !important;
    border: 1px solid #bde7db !important;
}

.frontend-layout .team-module__message--error,
.frontend-layout .topic-module__message--error,
.frontend-layout .results-module__message--error {
    color: #a33732 !important;
    background: #fff1ef !important;
    border: 1px solid #f2c3bf !important;
    outline: 3px solid transparent;
    outline-offset: 3px;
    animation: frontend-error-border-flash .7s ease-in-out 7;
}

@keyframes frontend-error-border-flash {
    0%,
    100% {
        outline-color: rgba(198, 67, 61, 0);
        box-shadow: 0 0 0 0 rgba(163, 55, 50, 0);
    }

    50% {
        outline-color: #c62828;
        box-shadow: 0 0 0 6px rgba(198, 40, 40, .34);
    }
}

/* Shared module item */
.frontend-layout .module__item {
    --module-item-accent: var(--frontend-cyan);
    padding: clamp(20px, 3vw, 28px);
    background: #fff;
    border: 1px solid var(--frontend-line);
    border-left: 5px solid var(--module-item-accent);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(30, 38, 64, .07);
}

.frontend-layout .module__item--cyan {
    --module-item-accent: var(--frontend-cyan);
}

.frontend-layout .module__item--orange {
    --module-item-accent: var(--frontend-orange);
}

.frontend-layout .module__item--gold {
    --module-item-accent: var(--frontend-gold);
}

.frontend-layout .module__item--gray {
    --module-item-accent: #CCCCCC;
}

/* Team */
.frontend-layout .team-module {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.frontend-layout .team-module__status,
.frontend-layout .team-module__invitation-heading,
.frontend-layout .team-module__members,
.frontend-layout .team-module__completion,
.frontend-layout .team-module__rejected,
.frontend-layout .team-module__joined-members,
.frontend-layout .team-module > form,
.frontend-layout .team-module > .team-module__message-card,
.frontend-layout .team-module > .team-module__unavailable {
    grid-column: 1 / -1;
}

.frontend-layout .team-module__team-name,
.frontend-layout .team-module__profile,
.frontend-layout .team-module__joined-members {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--frontend-line);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(30, 38, 64, .07);
}

.frontend-layout .team-module__name h2,
.frontend-layout .team-module__captain-profile h2,
.frontend-layout .team-module__members > h2,
.frontend-layout .team-module__team-name h2,
.frontend-layout .team-module__profile h2,
.frontend-layout .team-module__joined-members > h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

.frontend-layout .team-module__name,
.frontend-layout .team-module__captain-profile {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.frontend-layout .team-module__name > p,
.frontend-layout .team-module__captain-profile > p {
    margin: 0;
    line-height: 1.55;
}

.frontend-layout .team-module__name > p + p,
.frontend-layout .team-module__captain-profile > p + p {
    margin-top: 4px;
}

.frontend-layout .team-module__name > button[data-dialog-open],
.frontend-layout .team-module__captain-profile > button[data-dialog-open] {
    align-self: flex-start;
    margin-top: 12px;
}

.frontend-layout .team-module__members {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.frontend-layout .team-module__members > h2,
.frontend-layout .team-module__members > p,
.frontend-layout .team-module__captain-group,
.frontend-layout .team-module__role-grid {
    grid-column: 1 / -1;
}

.frontend-layout .team-module__captain-group,
.frontend-layout .team-module__joined-group {
    padding: 12px 16px;
}

.frontend-layout .team-module__role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
}

.frontend-layout .team-module__member-group {
    display: contents;
}

.frontend-layout .team-module__member-group--member > * {
    grid-column: 1;
}

.frontend-layout .team-module__member-group--instructor > * {
    grid-column: 2;
}

.frontend-layout .team-module__member-group > h3 {
    grid-row: 1;
    padding: 12px 16px 0;
}

.frontend-layout .team-module__member-rule {
    grid-row: 2;
    padding: 0 16px;
    margin: -2px 0 4px;
    color: var(--frontend-muted);
    font-size: 13px;
    line-height: 1.5;
}

.frontend-layout .team-module__accepted-list {
    grid-row: 3;
    padding: 0 16px 6px;
}

.frontend-layout .team-module__member-group > .team-module__invite {
    grid-row: 4;
    margin: 0 16px;
}

.frontend-layout .team-module__member-group > .team-module__message {
    grid-row: 4;
    margin: 10px 16px 0;
}

.frontend-layout .team-module__member-group > .team-module__invitation-list {
    grid-row: 5;
    padding: 0 16px 12px;
}

.frontend-layout .team-module__captain-group h3,
.frontend-layout .team-module__member-group h3,
.frontend-layout .team-module__joined-group h3 {
    margin: 0 0 7px;
    color: #394158;
    font-size: 16px;
}

.frontend-layout .team-module__captain-group p {
    margin: 0;
    line-height: 1.55;
}

.frontend-layout .team-module__empty-member {
    padding: 10px 12px;
    margin: 6px 0;
    color: var(--frontend-muted);
    background: #f7f8fb;
    border: 1px dashed #cfd5e2;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.frontend-layout .team-module__member {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin: 6px 0;
    background: #fff;
    gap: 5px 10px;
}

.frontend-layout .team-module__member > span:first-child {
    color: var(--frontend-text);
    font-weight: 800;
}

.frontend-layout .team-module__member-status {
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.frontend-layout .team-module__member-status--accepted {
    color: #0c7473;
    background: #e4f7f5;
    border-color: #b9e6e2;
}

.frontend-layout .team-module__member-status--pending {
    color: #a33732;
    background: #fff1ef;
    border-color: #f2c3bf;
}

.frontend-layout .team-module__member-status--rejected {
    color: #626a78;
    background: #f0f1f3;
    border-color: #d5d8dd;
}

.frontend-layout .team-module__member > .team-module__member_action_group {
    display: block;
    width: 100%;
}

.frontend-layout .team-module__member-action {
    display: inline-flex;
    margin: 0;
}

.frontend-layout .team-module__member-action button,
.frontend-layout .team-module__invite button {
    min-height: 36px;
    padding: 6px 11px;
    font-size: 13px;
}

.frontend-layout .team-module__member-action--danger button,
.frontend-layout .team-module form[action*="Reject"] button,
.frontend-layout .team-module form[action*="Leave"] button {
    background: #c64545;
    box-shadow: 0 8px 18px rgba(176, 48, 48, .18);
}

.frontend-layout .team-module__invite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding-top: 10px;
    gap: 8px;
}

.frontend-layout .team-module__invite label {
    margin: 0;
}

.frontend-layout .team-module__invitation-list {
    margin-top: 6px;
}

.frontend-layout .team-module__completion {
    display: flex;
    justify-content: flex-end;
    padding-top: 6px;
}

.frontend-layout .team-module__completion form {
    margin: 0;
}

.frontend-layout .team-module__dialog {
    padding: 0;
    color: var(--frontend-text);
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(6, 10, 24, .35);
}

.frontend-layout .team-module__dialog::backdrop {
    background: rgba(7, 11, 24, .72);
    backdrop-filter: blur(4px);
}

.frontend-layout .team-module__dialog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--frontend-panel), #12182b);
    gap: 16px;
}

.frontend-layout .team-module__dialog-heading h3 {
    margin: 0;
}

.frontend-layout .team-module__dialog-heading button {
    min-height: 34px;
    padding: 5px 11px;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: none;
    font-size: 13px;
}

.frontend-layout .team-module__dialog > form,
.frontend-layout .team-module__dialog > .team-profile-form {
    padding: 22px;
}

/* Team invitation */
.frontend-layout .team-module.team-module--invitation {
    display: block;
    width: min(100%, 860px);
    margin: 0 auto;
}

.frontend-layout .team-module--invitation .team-module__invitation-heading {
    display: block;
    margin-bottom: 24px;
}

.frontend-layout .team-module--invitation .team-module__invitation-heading h1 {
    margin-bottom: 8px;
}

.frontend-layout .team-module--invitation .team-module__invitation-heading > p:last-child {
    margin: 0;
    color: var(--frontend-muted);
}

.frontend-layout .team-module--invitation > .team-module__message {
    margin: 0 0 24px !important;
}

.frontend-layout .team-module__invitation-card {
    width: 100%;
    padding: clamp(22px, 4vw, 34px);
    margin-bottom: 22px;
    background: #fff;
    border: 1px solid var(--frontend-line);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(30, 38, 64, .08);
}

.frontend-layout .team-module__invitation-summary {
    border-top: 5px solid var(--frontend-cyan);
}

.frontend-layout .team-module__invitation-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 11px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.frontend-layout .team-module__invitation-status--pending {
    color: #98500b;
    background: #fff5df;
    border-color: #f2d49c;
}

.frontend-layout .team-module__invitation-status--accepted {
    color: #0d7775;
    background: #e7f8f6;
    border-color: #bde8e4;
}

.frontend-layout .team-module__invitation-status--rejected {
    color: #a33732;
    background: #fff1ef;
    border-color: #f2c3bf;
}

.frontend-layout .team-module__invitation-label,
.frontend-layout .team-module__section-step {
    margin: 0 0 6px;
    color: var(--frontend-orange-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.frontend-layout .team-module__invitation-summary h2 {
    margin: 0 0 22px;
    font-size: clamp(25px, 4vw, 34px);
}

.frontend-layout .team-module__invitation-meta,
.frontend-layout .team-module__profile-summary {
    margin: 0;
    border-top: 1px solid var(--frontend-line);
}

.frontend-layout .team-module__invitation-meta > div,
.frontend-layout .team-module__profile-summary > div,
.frontend-layout .team-module__joined-list > li {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    padding: 13px 0;
    border-bottom: 1px solid var(--frontend-line);
    gap: 16px;
}

.frontend-layout .team-module__invitation-meta dt,
.frontend-layout .team-module__profile-summary dt {
    color: var(--frontend-muted);
    font-weight: 700;
}

.frontend-layout .team-module__invitation-meta dd,
.frontend-layout .team-module__profile-summary dd {
    margin: 0;
    color: var(--frontend-text);
    font-weight: 800;
}

.frontend-layout .team-module__section-heading {
    padding-bottom: 18px;
}

.frontend-layout .team-module__section-heading h2 {
    margin: 0 0 7px;
}

.frontend-layout .team-module__section-heading > p:last-child {
    margin: 0;
    color: var(--frontend-muted);
}

.frontend-layout .team-module--invitation .team-module__invitation-form {
    grid-template-columns: 1fr;
    gap: 17px;
}

.frontend-layout .team-module__privacy-consent {
    padding: 14px 16px;
    background: #f4faf9;
    border: 1px solid #cce8e5;
    border-radius: 9px;
}

.frontend-layout .team-module__privacy-consent label {
    margin: 0;
}

.frontend-layout .team-module__privacy-consent input {
    flex: 0 0 auto;
}

.frontend-layout .team-module__invitation-submit button {
    width: 100%;
    min-height: 48px;
}

.frontend-layout .team-module__invitation-reject {
    padding-top: 18px;
    margin-top: 18px;
    text-align: center;
    border-top: 1px solid var(--frontend-line);
}

.frontend-layout .team-module form.team-module__invitation-reject button,
.frontend-layout .team-module form.team-module__joined-leave button {
    min-height: 38px;
    color: #fff;
    background: #c64545;
    border: 1px solid #b23b3b;
    box-shadow: 0 8px 18px rgba(176, 48, 48, .18);
}

.frontend-layout .team-module__profile-actions {
    padding-top: 20px;
}

.frontend-layout .team-module__profile-actions p {
    margin: 0;
    color: var(--frontend-muted);
}

.frontend-layout .team-module--invitation .team-module__joined-group {
    padding: 0;
}

.frontend-layout .team-module--invitation .team-module__joined-group h3 {
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 2px solid #dfe5ed;
}

.frontend-layout .team-module__joined-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.frontend-layout .team-module__joined-list span {
    color: var(--frontend-muted);
}

.frontend-layout .team-module__joined-leave {
    align-self: center;
    justify-self: end;
    margin: 0;
    text-align: right;
}

.frontend-layout .team-module--invitation .team-module__dialog {
    width: min(90vw, 680px);
    max-height: 88vh;
    overflow-y: auto;
}

/* Topic */
.frontend-layout .topic-module__messages {
    display: grid;
    margin-bottom: 20px;
    gap: 8px;
}

.frontend-layout .topic-module__selection form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.frontend-layout .topic-module__option {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--frontend-line);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(30, 38, 64, .06);
}

.frontend-layout .topic-module__option label {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    margin: 0;
    cursor: pointer;
    gap: 5px 10px;
}

.frontend-layout .topic-module__option label input {
    grid-row: 1 / span 3;
    margin-top: 4px;
}

.frontend-layout .topic-module__option label strong {
    color: var(--frontend-text);
    font-size: 18px;
}

.frontend-layout .topic-module__option label span {
    color: var(--frontend-muted);
    font-weight: 400;
}

.frontend-layout .topic-module__option-subtitle {
    color: var(--frontend-muted);
    font-weight: 400;
}

.frontend-layout .topic-module__option label .topic-module__option-subtitle {
    grid-column: 2;
}

.frontend-layout .topic-module__option-subtitle > :first-child {
    margin-top: 0;
}

.frontend-layout .topic-module__option-subtitle > :last-child {
    margin-bottom: 0;
}

.frontend-layout .topic-module__option:has(input:checked) {
    background: #f2fbfa;
    border-color: rgba(24, 169, 167, .65);
    box-shadow: 0 10px 28px rgba(24, 119, 117, .12);
}

.frontend-layout .topic-module__state {
    grid-column: 1 / -1;
}

.frontend-layout .topic-module__state {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 10px;
}

.frontend-layout .topic-module__state form {
    margin: 0;
}

.frontend-layout .frontend-module__state-action {
    justify-content: flex-end;
}

/* Results */
.frontend-layout .results-module__items {
    display: grid;
    gap: 20px;
}

.frontend-layout .results-module__item-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
    gap: 9px 12px;
}

.frontend-layout .results-module__item-heading h2 {
    margin: 0;
    font-size: 20px;
}

.frontend-layout .results-module__requirement {
    padding: 3px 8px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.frontend-layout .results-module__requirement--required {
    color: #a33732;
    background: #fff1ef;
    border-color: #f2c3bf;
}

.frontend-layout .results-module__requirement--optional {
    color: #626a78;
    background: #f0f1f3;
    border-color: #d5d8dd;
}

.frontend-layout .results-module__sample-file {
    margin-bottom: 16px;
}

.frontend-layout .results-module__download-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 13px;
    border: 1px solid;
    border-radius: 9px;
    font-weight: 800;
    text-decoration: none;
    gap: 10px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.frontend-layout .results-module__download-link:hover,
.frontend-layout .results-module__download-link:focus-visible {
    transform: translateY(-1px);
}

.frontend-layout .results-module__download-link svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.frontend-layout .results-module__download-link span {
    display: grid;
    gap: 1px;
}

.frontend-layout .results-module__download-link small {
    font-size: 12px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.frontend-layout .results-module__download-link--sample {
    color: #146f73;
    background: #effafa;
    border-color: #b9e3e1;
}

.frontend-layout .results-module__download-link--sample:hover,
.frontend-layout .results-module__download-link--sample:focus-visible {
    background: #e2f6f4;
    border-color: #83cac6;
}

.frontend-layout .results-module__text form,
.frontend-layout .results-module__file form {
    display: grid;
    gap: 10px;
}

.frontend-layout .results-module textarea {
    min-height: 150px;
    resize: vertical;
}

.frontend-layout .results-module__file {
    padding: 16px;
    background: #f7f8fb;
    border: 1px solid #e2e5ed;
    border-radius: 9px;
}

.frontend-layout .results-module__file p {
    margin: 5px 0;
    color: var(--frontend-muted);
}

.frontend-layout .results-module__file-requirements {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 14px;
    gap: 8px;
}

.frontend-layout .results-module__file-requirements span {
    padding: 6px 9px;
    color: var(--frontend-muted);
    background: #fff;
    border: 1px solid #dde1e9;
    border-radius: 7px;
    font-size: 13px;
}

.frontend-layout .results-module__file-requirements strong {
    color: var(--frontend-text);
}

.frontend-layout .results-module__file .results-module__file-warning {
    padding: 10px 12px;
    margin: 10px 0;
    color: #a33732;
    background: #fff1ef;
    border: 1px solid #f2c3bf;
    border-radius: 8px;
}

.frontend-layout .results-module__uploaded-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    margin: 14px 0;
    background: #fff;
    border: 1px solid #d9e7e6;
    border-radius: 9px;
    gap: 14px;
}

.frontend-layout .results-module__uploaded-file-info {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.frontend-layout .results-module__uploaded-file-info > span,
.frontend-layout .results-module__uploaded-file-info > small {
    color: var(--frontend-muted);
    font-size: 12px;
}

.frontend-layout .results-module__uploaded-file-info > strong {
    color: var(--frontend-text);
    overflow-wrap: anywhere;
}

.frontend-layout .results-module__uploaded-file-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
}

.frontend-layout .results-module__download-link--uploaded {
    color: #fff;
    background: #167d81;
    border-color: #167d81;
}

.frontend-layout .results-module__download-link--uploaded:hover,
.frontend-layout .results-module__download-link--uploaded:focus-visible {
    color: #fff;
    background: #106e72;
    border-color: #106e72;
}

.frontend-layout .results-module__uploaded-file-actions form {
    display: inline-flex;
    margin: 0;
}

.frontend-layout .results-module input[type="file"] {
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px dashed #aeb7c9;
    border-radius: 8px;
}

.frontend-layout .results-module__upload-form {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid #e2e5ed;
}

.frontend-layout .results-module form[action*="DeleteFile"] {
    display: inline-flex;
    margin: 6px 0;
}

.frontend-layout .results-module form[action*="DeleteFile"] button {
    background: #c64545;
    box-shadow: 0 8px 18px rgba(176, 48, 48, .18);
}

.frontend-layout .results-module__submission {
    display: flex;
    justify-content: flex-end;
    padding-top: 22px;
}

.frontend-layout .results-module__submission form {
    margin: 0;
}

/* Checker */
.frontend-layout .checker-module {
    display: grid;
    width: 100%;
    gap: 22px;
}

.frontend-layout .checker-module__summary {
    display: flex;
    align-items: center;
    padding: 24px 26px;
    border: 1px solid;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(30, 38, 64, .07);
    gap: 18px;
}

.frontend-layout .checker-module__summary--passed {
    background: linear-gradient(135deg, #f2fbfa, #fff);
    border-color: #b9e6e2;
}

.frontend-layout .checker-module__summary--failed {
    background: linear-gradient(135deg, #fff1ef, #fff);
    border-color: #f2c3bf;
}

.frontend-layout .checker-module__summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 7px 18px rgba(30, 38, 64, .1);
}

.frontend-layout .checker-module__summary-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.frontend-layout .checker-module__summary--passed .checker-module__summary-icon {
    color: #0c7473;
}

.frontend-layout .checker-module__summary--failed .checker-module__summary-icon {
    color: #b13c36;
}

.frontend-layout .checker-module__summary-copy {
    min-width: 0;
}

.frontend-layout .checker-module__eyebrow {
    margin: 0 0 4px;
    color: var(--frontend-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.frontend-layout .checker-module__summary h2 {
    margin: 0;
    font-size: clamp(21px, 2.5vw, 28px);
}

.frontend-layout .checker-module__overall {
    margin: 5px 0 0;
    font-size: 16px;
    font-weight: 700;
}

.frontend-layout .checker-module__summary--passed .checker-module__overall {
    color: #0c7473;
}

.frontend-layout .checker-module__summary--failed .checker-module__overall {
    color: #a33732;
}

.frontend-layout .checker-module__items {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--frontend-line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(30, 38, 64, .06);
}

.frontend-layout .checker-module__items > p {
    padding: 22px 24px;
    margin: 0;
    color: var(--frontend-muted);
}

.frontend-layout .checker-module__table {
    width: 100%;
    border-collapse: collapse;
}

.frontend-layout .checker-module__table td {
    padding: 18px 22px;
    border-bottom: 1px solid var(--frontend-line);
}

.frontend-layout .checker-module__table tr:last-child td {
    border-bottom: 0;
}

.frontend-layout .checker-module__item-name {
    color: var(--frontend-text);
    font-size: 16px;
    font-weight: 800;
}

.frontend-layout .checker-module__item-status {
    text-align: right;
}

.frontend-layout .checker-module__status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 11px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
}

.frontend-layout .checker-module__status--passed {
    color: #0c7473;
    background: #e4f7f5;
    border-color: #b9e6e2;
}

.frontend-layout .checker-module__status--failed {
    color: #a33732;
    background: #fff1ef;
    border-color: #f2c3bf;
}

.frontend-layout .checker-module__status-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.frontend-layout .checker-module__status-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 760px) {
    .frontend-layout .register-module__registration form,
    .frontend-layout .user-module__forget form,
    .frontend-layout .user-module__reset form,
    .frontend-layout .team-profile-form,
    .frontend-layout .team-module,
    .frontend-layout .team-module__members,
    .frontend-layout .topic-module__selection form {
        grid-template-columns: 1fr;
    }

    .frontend-layout .team-module__status,
    .frontend-layout .team-module__invitation-heading,
    .frontend-layout .team-module__members,
    .frontend-layout .team-module__completion,
    .frontend-layout .team-module__rejected,
    .frontend-layout .team-module__joined-members,
    .frontend-layout .team-module > form,
    .frontend-layout .team-module > .team-module__message-card,
    .frontend-layout .team-module > .team-module__unavailable,
    .frontend-layout .team-module__members > h2,
    .frontend-layout .team-module__members > p,
    .frontend-layout .team-module__captain-group,
    .frontend-layout .topic-module__state {
        grid-column: auto;
    }

    .frontend-layout .user-profile-module {
        grid-template-columns: 1fr;
    }

    .frontend-layout .team-module__role-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .frontend-layout .team-module__member-group {
        display: flex;
        flex-direction: column;
        padding: 16px;
    }

    .frontend-layout .team-module__member-group > * {
        grid-column: auto;
        grid-row: auto;
    }

    .frontend-layout .team-module__member-group > h3 {
        padding: 0;
    }

    .frontend-layout .team-module__member-rule {
        padding: 0;
    }

    .frontend-layout .team-module__accepted-list {
        padding: 0 0 8px;
    }

    .frontend-layout .team-module__member-group > .team-module__invite {
        margin-right: 0;
        margin-left: 0;
    }

    .frontend-layout .team-module__member-group > .team-module__message {
        margin-right: 0;
        margin-left: 0;
    }

    .frontend-layout .team-module__member-group > .team-module__invitation-list {
        padding: 0;
    }
}

@media (max-width: 500px) {
    .frontend-layout .register-module__registration,
    .frontend-layout .user-module__forget,
    .frontend-layout .user-module__reset,
    .frontend-layout .team-module__team-name,
    .frontend-layout .team-module__profile,
    .frontend-layout .team-module__joined-members {
        padding: 18px;
    }

    .frontend-layout .team-module__invite {
        grid-template-columns: 1fr;
    }

    .frontend-layout .team-module__completion,
    .frontend-layout .topic-module__state,
    .frontend-layout .results-module__submission {
        justify-content: stretch;
    }

    .frontend-layout .team-module__completion form,
    .frontend-layout .team-module__completion button,
    .frontend-layout .topic-module__state button,
    .frontend-layout .results-module__submission form,
    .frontend-layout .results-module__submission button {
        width: 100%;
    }

    .frontend-layout .team-module__invitation-meta > div,
    .frontend-layout .team-module__profile-summary > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .frontend-layout .team-module__joined-list li {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .frontend-layout .team-module__joined-list span {
        text-align: left;
    }

    .frontend-layout .team-module__joined-leave {
        justify-self: end;
    }

    .frontend-layout .checker-module__summary {
        align-items: flex-start;
        padding: 20px;
    }

    .frontend-layout .checker-module__summary-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .frontend-layout .checker-module__item {
        display: grid;
    }

    .frontend-layout .checker-module__table td {
        display: block;
        border-bottom: 0;
    }

    .frontend-layout .checker-module__item-name {
        padding: 16px 18px 5px;
    }

    .frontend-layout .checker-module__item-status {
        padding: 0 18px 16px;
        border-bottom: 1px solid var(--frontend-line);
        text-align: left;
    }

    .frontend-layout .checker-module__table tr:last-child .checker-module__item-status {
        border-bottom: 0;
    }

    .frontend-layout .consent-module__heading,
    .frontend-layout .consent-module__content {
        padding: 20px 18px;
    }

    .frontend-layout .consent-module__actions {
        padding: 16px 18px;
    }

    .frontend-layout .consent-module__back-link {
        width: 100%;
    }

    .frontend-layout .user-profile-module__basic-info,
    .frontend-layout .user-profile-module__password-reset {
        padding: 20px 18px;
    }

    .frontend-layout .user-profile-module dl {
        grid-template-columns: 1fr;
    }

    .frontend-layout .user-profile-module dt {
        padding-bottom: 3px;
        border-bottom: 0;
    }

    .frontend-layout .user-profile-module dd {
        padding-top: 0;
    }

    .frontend-layout .user-profile-module__password-reset button,
    .frontend-layout .results-module__download-link--sample {
        width: 100%;
    }

    .frontend-layout .results-module__uploaded-file {
        align-items: stretch;
        flex-direction: column;
    }

    .frontend-layout .results-module__uploaded-file-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .frontend-layout .results-module__download-link--uploaded,
    .frontend-layout .results-module__uploaded-file-actions form,
    .frontend-layout .results-module__uploaded-file-actions button {
        width: 100%;
    }
}

@media (max-width: 920px) {
    .frontend-layout .topic-module__selection form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .frontend-layout .user-module__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .frontend-layout .user-module--login {
        grid-template-columns: minmax(250px, .8fr) minmax(350px, 1.2fr);
    }
}

@media (max-width: 740px) {
    .frontend-layout .topic-module__selection form {
        grid-template-columns: 1fr;
    }

    .frontend-layout__masthead {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .frontend-layout__header {
        width: 100%;
        flex-wrap: wrap;
    }

    .frontend-layout__current-user {
        width: 100%;
        margin-left: 22px;
        white-space: normal;
    }

    .frontend-layout__navigation {
        align-self: flex-end;
    }

    .frontend-layout .user-module--login {
        grid-template-columns: 1fr;
        margin: -12px;
    }

    .frontend-layout .user-module__visual {
        min-height: 180px;
        max-height: 220px;
    }

    .frontend-layout .user-module__visual img {
        object-position: center 60%;
    }

    .frontend-layout .user-module__login {
        padding: 30px 24px;
    }
}

@media (max-width: 560px) {
    .frontend-layout__masthead,
    .frontend-layout__main,
    .frontend-layout__footer {
        width: calc(100% - 24px);
    }

    .frontend-layout__masthead {
        margin-top: 12px;
        padding: 12px 14px;
        border-radius: 12px 12px 0 0;
    }

    .frontend-layout__main {
        min-height: 360px;
        padding: 24px 18px;
        border-radius: 0 0 12px 12px;
    }

    .frontend-layout__brand-mark {
        width: 7px;
        height: 32px;
    }

    .frontend-layout__activity-name {
        flex: 1 1 calc(100% - 24px);
    }

    .frontend-layout .user-module__register {
        align-items: flex-start;
        flex-direction: column;
    }

    .frontend-layout .user-module__captcha-controls,
    .frontend-layout .register-module__captcha-controls {
        grid-template-columns: minmax(0, 1fr) minmax(100px, 130px) 44px;
    }

    .frontend-layout .user-module__cards {
        grid-template-columns: 1fr;
    }

    .frontend-layout .user-module__hero {
        min-height: 190px;
        margin-bottom: 24px;
    }

    .frontend-layout .user-module__hero-copy {
        padding: 28px 22px;
    }
}

.frontend-simulation {
    position: fixed;
    z-index: 1000;
    top: 12px;
    right: 12px;
    padding: 10px;
    border: 1px solid #991b1b;
    background: #fff;
}

.frontend-simulation__description,
.frontend-simulation__time,
.frontend-simulation__end {
    margin: 0 0 6px;
}

.frontend-simulation__end {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .frontend-layout *,
    .frontend-layout *::before,
    .frontend-layout *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .frontend-layout .team-module__message--error,
    .frontend-layout .topic-module__message--error,
    .frontend-layout .results-module__message--error {
        animation-duration: .7s !important;
        animation-iteration-count: 7 !important;
    }
}
