/* assets/css/pages/login.css */

/* ===================================================== */
/* LOGIN PAGE */
/* ===================================================== */

.login-container {

    width: 100%;
    min-height: 100vh;

    padding:
        0 2rem 3rem;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;

    gap:
        1.5rem;

    position: relative;

}

.login-section {

    width: 100%;
    max-width: 1180px;

    display: grid;

    grid-template-columns:
        minmax(260px, 420px) minmax(320px, 520px);

    align-items: center;

    gap: 4rem;

    margin:
        auto 0;

}

.login-welcome {

    color: white;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

}

.login-welcome img {

    width: clamp(180px, 22vw, 300px);

    display: block;

    margin:
        0 auto 0rem;

    filter:
        drop-shadow(0 20px 35px rgba(0, 0, 0, 0.25));

    animation:
        floating 5s ease-in-out infinite;

}

.login-welcome h1 {

    font-size: clamp(2.6rem, 5vw, 4.8rem);

    color: white;

    margin-bottom: 0.4rem;

}

.login-welcome p {

    max-width: 420px;

    margin:
        0 auto;

    color:
        rgba(255, 255, 255, 0.9);

}

.login-card {

    width: 100%;

    padding:
        2rem;

    background:
        rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(18px);

    border:
        2px solid rgba(255, 255, 255, 0.16);

    border-radius: 28px;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.18);

    color: white;

}

.login-card h2 {

    color: white;

    margin-bottom: 0.75rem;

}

.login-card p {

    color:
        rgba(255, 255, 255, 0.86);

    margin-bottom: 1.5rem;

}

.login-form {

    display: grid;

    gap: 1.25rem;

}

.form-group {

    display: grid;

    gap: 0.5rem;

}

.form-group label {

    color: white;

    font-weight: 800;

}

.field-label-row {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

}

.lsc-field-help {

    width: 34px;
    height: 34px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: none;

    border-radius: 50%;

    padding:
        0.25rem;

    cursor: pointer;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.lsc-field-help:hover,
.lsc-field-help:focus {

    transform:
        translateY(-2px);

    outline:
        3px solid rgba(255, 255, 255, 0.48);

    outline-offset: 2px;

    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.22);

}

.lsc-field-help img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

}

.form-group input {

    width: 100%;

    min-height: 60px;

    border:
        2px solid rgba(255, 255, 255, 0.18);

    border-radius: 18px;

    padding:
        0 1rem;

    font:
        inherit;

    color:
        var(--color-text);

    background:
        rgba(255, 255, 255, 0.94);

}

.password-input-wrap {

    position: relative;

}

.password-input-wrap input {

    padding-right:
        4.25rem;

}

.password-toggle {

    position: absolute;

    top: 50%;
    right: 0.85rem;

    transform:
        translateY(-50%);

    width: 42px;
    height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color:
        var(--color-primary-dark);

    background:
        rgba(255, 255, 255, 0.86);

}

.password-toggle:hover,
.password-toggle:focus {

    outline:
        3px solid rgba(0, 101, 47, 0.25);

    outline-offset: 2px;

    background:
        white;

}

.password-toggle svg {

    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

}

.form-group select {

    width: 100%;

    min-height: 60px;

    border:
        2px solid rgba(255, 255, 255, 0.18);

    border-radius: 18px;

    padding:
        0 1rem;

    font:
        inherit;

    color:
        var(--color-text);

    background:
        rgba(255, 255, 255, 0.94);

}

.form-group select optgroup {

    font-weight: 900;
    font-style: italic;

}

.form-group select option {

    font-weight: 400;
    font-style: normal;

}

.form-group input:focus {

    outline:
        4px solid rgba(255, 255, 255, 0.45);

    outline-offset: 3px;

}

.form-group select:focus {

    outline:
        4px solid rgba(255, 255, 255, 0.45);

    outline-offset: 3px;

}

.form-group.has-error input,
.form-group.has-error select,
.avatar-field.has-error {

    border-color:
        #ffdf7e;

    box-shadow:
        0 0 0 4px rgba(255, 223, 126, 0.22);

}

.field-error {

    margin: 0;

    color:
        #fff2b8;

    font-size: 0.95rem;

    font-weight: 800;

}

.avatar-field .field-error {

    grid-column:
        1 / -1;

    color:
        #fff2b8;

    margin: 0;

}

.login-submit {

    margin-top: 0.5rem;

    width: 100%;

}

.login-submit.is-loading {

    cursor: wait;

    opacity: 0.82;

}

.login-help {

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

    margin-top: 0.5rem;

}

.login-help a {

    color: white;

    font-weight: 800;

}

.lsc-action-with-help {

    display: inline-flex;

    align-items: center;

}

.lsc-action-help {

    width: 30px;
    height: 30px;

    margin-left:
        0.4rem;

    vertical-align: middle;

}

body[data-theme="dark"] .login-card {

    background:
        rgba(0, 0, 0, 0.28);

    border:
        1px solid rgba(255, 255, 255, 0.08);

}

/* ===================================================== */
/* DASHBOARD */
/* ===================================================== */

.dashboard-container {

    min-height: calc(100vh - 96px);

    padding:
        0 2rem 2rem;

    align-items: flex-start;

}

.dashboard-navbar {

    width: 100vw;
    max-width: none;

    border-radius: 0;

    border-left: none;
    border-right: none;
    border-top: none;

}

.dashboard-section {

    width: 100%;
    max-width: 1180px;

    position: relative;

    margin:
        2rem auto 0;

}

.dashboard-main-panel {

    width: 100%;

    min-height: min(620px, calc(100vh - 12rem));

    overflow: hidden;

    color: white;

    background:
        rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(18px);

    border:
        2px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.18);

}

.dashboard-hero {

    min-height: 112px;

    padding:
        1.4rem 2rem;

    display: flex;
    flex-direction: column;

    justify-content: center;

    border-bottom:
        2px solid rgba(255, 255, 255, 0.24);

}

.dashboard-hero h1 {

    margin: 0;

    color: white;

    font-size: clamp(2rem, 4vw, 3.6rem);

}

.dashboard-hero p {

    margin: 0.35rem 0 0;

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 1.25rem;

    font-weight: 800;

}

.subject-grid {

    padding:
        2rem;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 1.5rem;

}

.subject-card {

    --subject-color: var(--color-primary-dark);

    min-height: 430px;

    display: grid;

    grid-template-rows:
        minmax(220px, 1fr) auto auto;

    align-items: start;

    overflow: hidden;

    color: white;

    border:
        2px solid color-mix(in srgb, var(--subject-color) 70%, white 30%);

    border-radius: 24px;

    background:
        rgba(255, 255, 255, 0.12);

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;

}

.subject-card:hover {

    transform:
        translateY(-6px);

    background:
        rgba(255, 255, 255, 0.18);

}

.subject-image {

    width: 100%;
    min-height: 240px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        1.25rem;

    background:
        color-mix(in srgb, var(--subject-color) 35%, rgba(255, 255, 255, 0.15));

}

.subject-image img {

    width: 100%;
    height: 100%;

    max-height: 260px;

    object-fit: contain;

    display: block;

}

.subject-name {

    padding:
        1rem 1.25rem 0.5rem;

    color: white;

    font-size: 1.45rem;

    font-weight: 900;

    text-align: center;

}

.subject-actions {

    padding:
        0 1.25rem 1.25rem;

    display: grid;

    gap: 0.75rem;

}

.subject-action-btn {

    min-height: 52px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0.75rem 1rem;

    border:
        1px solid rgba(255, 255, 255, 0.24);

    border-radius: 16px;

    color: white;

    background:
        color-mix(in srgb, var(--subject-color) 58%, rgba(255, 255, 255, 0.14));

    font:
        inherit;

    font-weight: 900;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

}

.subject-action-btn:hover,
.subject-action-btn:focus {

    background:
        color-mix(in srgb, var(--subject-color) 78%, rgba(255, 255, 255, 0.18));

    outline:
        3px solid rgba(255, 255, 255, 0.36);

    outline-offset: 3px;

}

.subject-action-btn:disabled {

    cursor: not-allowed;

    opacity: 0.55;

}

.subject-empty {

    grid-column:
        1 / -1;

    margin: 0;

    padding:
        2rem;

    color: white;

    text-align: center;

    font-weight: 900;

}

.subject-video-modal {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding:
        1rem;

    background:
        rgba(0, 0, 0, 0.68);

    backdrop-filter: blur(8px);

    z-index: 10005;

}

.subject-video-modal.active {

    display: flex;

}

.subject-video-panel {

    width: min(960px, 100%);

    overflow: hidden;

    color: white;

    background:
        rgba(8, 35, 20, 0.98);

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 22px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.36);

}

.subject-video-header {

    min-height: 64px;

    padding:
        0.85rem 1rem 0.85rem 1.25rem;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);

}

.subject-video-header h2 {

    margin: 0;

    color: white;

    font-size: 1.35rem;

}

.subject-video-close {

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color:
        var(--color-primary-dark);

    background:
        rgba(255, 255, 255, 0.95);

    font:
        inherit;

    font-weight: 900;

}

.subject-video-body {

    background:
        #000;

}

.subject-video-body video {

    width: 100%;
    max-height: min(70vh, 680px);

    display: block;

    background:
        #000;

}

.topic-detail {

    padding:
        2rem;

    display: grid;

    grid-template-columns:
        minmax(220px, 360px) minmax(0, 1fr);

    gap: 2rem;

    color: white;

}

.topic-detail-media {

    min-height: 280px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        1rem;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.1);

}

.topic-detail-media img {

    width: 100%;
    max-height: 320px;

    object-fit: contain;

}

.topic-detail-content {

    display: grid;

    align-content: start;

    gap: 1.25rem;

}

.topic-detail-content p {

    margin: 0;

    color:
        rgba(255, 255, 255, 0.9);

    font-weight: 750;

    line-height: 1.6;

}

.topic-detail-content h2 {

    margin: 0;

    color: white;

}

.topic-placeholder-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(140px, 1fr));

    gap: 0.85rem;

}

.topic-placeholder-grid span {

    padding:
        0.9rem 1rem;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.1);

    font-weight: 900;

    text-align: center;

}

/* ===================================================== */
/* RIGHTS PAGE */
/* ===================================================== */

.rights-container {

    min-height: auto;

}

.rights-layout {

    width: 100%;
    max-width: 1400px;

    display: block;

}

.rights-content {

    color: white;

    background:
        rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(18px);

    border:
        2px solid rgba(255, 255, 255, 0.18);

    border-radius: 22px;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.18);

}

.rights-header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(320px, 0.85fr);

    align-items: stretch;

    gap: 1rem;

    margin-bottom:
        1.25rem;

    padding:
        1.5rem;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.1);

}

.rights-header-text {

    display: grid;

    align-content: center;

    gap: 1rem;

}

.rights-header h1 {

    margin: 0;

    color: white;

    font-size: clamp(2rem, 4vw, 3.4rem);

    line-height: 1.08;

}

.rights-header p,
.rights-accordion p,
.rights-accordion li {

    color:
        rgba(255, 255, 255, 0.9);

    font-weight: 720;

    line-height: 1.6;

}

.rights-accordion {

    display: grid;

    gap: 0.9rem;

}

.rights-accordion details {

    padding:
        1rem 1.1rem;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.1);

}

.rights-accordion summary {

    color: white;

    cursor: pointer;

    font-size: 1.08rem;

    font-weight: 900;

}

.rights-accordion details[open] summary {

    margin-bottom:
        0.85rem;

}

.rights-accordion ul {

    margin:
        0.75rem 0 0 1.25rem;

}

.rights-inline-video {

    display: grid;

    gap: 0.75rem;

}

.rights-video-frame,
.rights-section-video {

    display: grid;

    gap: 0.85rem;

    padding:
        1rem;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 18px;

    background:
        rgba(0, 0, 0, 0.22);

}

.rights-video-frame video,
.rights-section-video video {

    width: 100%;

    aspect-ratio: 16 / 9;

    display: block;

    border-radius: 14px;

    background:
        #000;

}

.rights-video-frame p,
.rights-section-video p {

    margin: 0;

    color:
        rgba(255, 255, 255, 0.9);

    font-weight: 800;

    text-align: center;

}

.rights-section-video {

    margin-bottom:
        1rem;

    background:
        rgba(0, 0, 0, 0.18);

}

.rights-section-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 65fr) minmax(260px, 35fr);

    grid-template-areas:
        "text video";

    gap: 1rem;

    align-items: start;

}

.rights-section-text {

    grid-area: text;

    display: grid;

    gap: 0.8rem;

}

.rights-section-text p,
.rights-section-text ul {

    margin: 0;

}

.rights-section-text ul {
    padding-left: 1.45rem;

}

.rights-section-text li {
    padding-left: 0.35rem;
    margin-bottom: 0.45rem;

}

.rights-section-text li:last-child {
    margin-bottom: 0;
}

.rights-section-grid .rights-section-video {

    grid-area: video;

    margin-bottom: 0;

    position: sticky;

    top: 1rem;

}

.dashboard-user-menu {

    position: relative;

}

.dashboard-user-menu summary {

    min-height: 58px;

    display: flex;

    align-items: center;

    gap: 0.8rem;

    padding:
        0.5rem
        0.65rem
        0.5rem
        1rem;

    border-radius: 999px;

    color: white;

    font-weight: 900;

    cursor: pointer;

    list-style: none;

    background:
        rgba(255, 255, 255, 0.12);

}

.dashboard-user-menu summary::-webkit-details-marker {

    display: none;

}

.dashboard-avatar {

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.94);

    overflow: hidden;

}

.dashboard-avatar img {

    width: 78%;
    height: 78%;

    object-fit: contain;

}

.dashboard-menu-panel {

    position: absolute;

    top: calc(100% + 0.75rem);
    right: 0;

    min-width: 210px;

    padding:
        0.75rem;

    display: grid;

    gap: 0.5rem;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 18px;

    background:
        rgba(8, 35, 20, 0.98);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.24);

}

.dashboard-menu-panel a,
.dashboard-menu-panel button {

    width: 100%;

    min-height: 46px;

    padding:
        0.75rem 1rem;

    border: none;

    border-radius: 14px;

    color: white;

    background:
        rgba(255, 255, 255, 0.1);

    font:
        inherit;

    font-weight: 800;

    text-align: left;

    text-decoration: none;

    cursor: pointer;

}

.dashboard-menu-panel a:hover,
.dashboard-menu-panel button:hover,
.dashboard-menu-panel a:focus,
.dashboard-menu-panel button:focus {

    background:
        rgba(255, 255, 255, 0.2);

    outline:
        3px solid rgba(255, 255, 255, 0.34);

}

/* ===================================================== */
/* REGISTER PAGE */
/* ===================================================== */

.register-container {

    align-items: flex-start;

}

.register-section {

    max-width: 1280px;

    grid-template-columns:
        minmax(240px, 360px) minmax(420px, 760px);

    align-items: start;

}

.register-card {

    padding:
        1.6rem;

}

.register-form {

    gap: 1rem;

}

.form-row {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1rem;

}

.avatar-field {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;

    gap: 1rem;

    padding:
        1rem;

    border:
        2px solid rgba(255, 255, 255, 0.14);

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.08);

}

.avatar-label {

    display: block;

    color: white;

    font-weight: 900;

    margin-bottom: 0.25rem;

}

.avatar-field p {

    margin: 0;

    color:
        rgba(255, 255, 255, 0.86);

}

.avatar-controls {

    display: flex;

    align-items: center;

    gap: 1rem;

}

.avatar-preview {

    width: 88px;
    height: 88px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border:
        4px solid rgba(255, 255, 255, 0.82);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.16);

    overflow: hidden;

    color:
        var(--color-primary-dark);

    font-size: 2rem;

    font-weight: 900;

}

.avatar-preview img {

    width: 78%;
    height: 78%;

    object-fit: contain;

}

.avatar-modal {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding:
        2rem;

    z-index: 10000;

}

.register-message-modal {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding:
        1.5rem;

    background:
        rgba(0, 0, 0, 0.58);

    backdrop-filter: blur(8px);

    z-index: 10001;

}

.register-message-modal.active {

    display: flex;

}

.register-message-panel {

    width: min(980px, 100%);
    min-height: min(520px, 88vh);

    display: grid;

    grid-template-columns:
        minmax(280px, 40%) minmax(0, 1fr);

    overflow: hidden;

    color: white;

    background:
        rgba(8, 35, 20, 0.98);

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 28px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.32);

}

.register-message-video {

    min-height: 420px;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        rgba(255, 255, 255, 0.8);

    font-weight: 900;

    background:
        rgba(255, 255, 255, 0.1);

    border-right:
        1px solid rgba(255, 255, 255, 0.12);

}

.register-message-body {

    padding:
        2.5rem;

    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 1rem;

}

.forgot-password-panel .register-message-body {

    justify-content: center;

}

.forgot-password-form {

    width: 100%;

    gap: 1rem;

}

.register-message-body h2 {

    color: white;

}

.register-message-body p {

    margin: 0;

    color:
        rgba(255, 255, 255, 0.9);

    font-weight: 700;

}

.register-message-modal.is-success .register-message-panel {

    border-color:
        rgba(255, 255, 255, 0.28);

}

.register-message-modal.is-error .register-message-panel {

    border-color:
        rgba(255, 223, 126, 0.72);

}

.lsc-help-modal {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding:
        1rem;

    background:
        rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(6px);

    z-index: 10003;

}

.lsc-help-modal.active {

    display: flex;

}

.lsc-help-panel {

    position: relative;

    width: min(420px, 100%);

    padding:
        1.25rem;

    color: white;

    background:
        rgba(8, 35, 20, 0.98);

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 22px;

    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.32);

}

.lsc-help-panel h2 {

    color: white;

    padding-right:
        3rem;

    margin-bottom:
        1rem;

    font-size: 1.35rem;

}

.lsc-help-close {

    position: absolute;

    top: 0.85rem;
    right: 0.85rem;

    width: 40px;
    height: 40px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color:
        var(--color-primary-dark);

    background:
        rgba(255, 255, 255, 0.94);

    font:
        inherit;

    font-weight: 900;

}

.lsc-help-media {

    min-height: 240px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.1);

}

.lsc-help-media img {

    width: 100%;
    max-height: 320px;

    object-fit: contain;

    display: block;

}

.lsc-help-media p {

    margin: 0;

    padding:
        1rem;

    color:
        rgba(255, 255, 255, 0.88);

    text-align: center;

    font-weight: 800;

}

.avatar-modal.active {

    display: flex;

}

.avatar-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.58);

    backdrop-filter: blur(8px);

}

.avatar-modal-panel {

    position: relative;

    width: min(920px, 100%);
    max-height: min(720px, 86vh);

    padding:
        1.5rem;

    overflow: auto;

    color: white;

    background:
        rgba(8, 35, 20, 0.96);

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 28px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.32);

}

.avatar-modal-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1rem;

}

.avatar-modal-header h2 {

    color: white;

}

.avatar-close {

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color:
        var(--color-primary-dark);

    background:
        rgba(255, 255, 255, 0.94);

    font:
        inherit;

    font-weight: 900;

}

.avatar-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(92px, 1fr));

    gap: 1rem;

}

.avatar-option {

    aspect-ratio: 1;

    border:
        3px solid transparent;

    border-radius: 24px;

    cursor: pointer;

    background:
        rgba(255, 255, 255, 0.92);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}

.avatar-option:hover,
.avatar-option:focus {

    transform:
        translateY(-4px);

    border-color:
        var(--color-gold);

    outline: none;

    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.18);

}

.avatar-option.selected {

    border-color:
        var(--color-primary-light);

}

.avatar-option img {

    width: 74%;
    height: 74%;

    object-fit: contain;

}

body[data-theme="dark"] .avatar-modal-panel,
body[data-theme="dark"] .avatar-field {

    background:
        rgba(0, 0, 0, 0.34);

    border:
        1px solid rgba(255, 255, 255, 0.08);

}

/* ===================================================== */
/* ACCESS DENIED */
/* ===================================================== */

.access-denied-container {

    min-height: calc(100vh - 100px);

    padding:
        4rem 2rem 2rem;

}

.access-denied-section {

    width: 100%;
    max-width: 760px;

    position: relative;

}

.access-denied-card {

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

}

.access-denied-card h1 {

    color: white;

    font-size: clamp(2.4rem, 5vw, 4.8rem);

    margin-bottom: 0.25rem;

}

.access-denied-card img {

    width: clamp(220px, 34vw, 420px);

    display: block;

    margin:
        0 auto 0;

    filter:
        drop-shadow(0 20px 35px rgba(0, 0, 0, 0.25));

    animation:
        floating 5s ease-in-out infinite;

}

.access-denied-card p {

    max-width: 620px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.9);

    font-weight: 700;

}

@media (max-width: 900px) {

    .login-section {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    .register-section {

        grid-template-columns: 1fr;

    }

    .login-welcome {

        text-align: center;

    }

    .login-welcome img {

        margin-left: auto;
        margin-right: auto;

    }

    .login-welcome p {

        margin:
            0 auto;

    }

    .rights-header {

        grid-template-columns: 1fr;

    }

    .rights-inline-video {

        order: -1;

    }

}

@media (max-width: 760px) {

    .rights-section-grid {

        grid-template-columns: 1fr;

        grid-template-areas:
            "video"
            "text";

    }

    .rights-section-text {

        grid-area: text;

    }

    .rights-section-grid .rights-section-video {

        grid-area: video;

        position: static;

    }

}

@media (max-width: 600px) {

    .login-container {

        padding:
            0 1rem 2rem;

    }

    .login-card {

        padding:
            1.25rem;

    }

    .dashboard-container {

        padding:
            0 1rem 2rem;

    }

    .dashboard-navbar {

        padding:
            0.75rem 1rem;

    }

    .dashboard-user-menu summary span:first-child {

        max-width: 150px;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }

    .dashboard-user-menu,
    .dashboard-user-menu summary {

        width: 100%;

    }

    .dashboard-menu-panel {

        position: static;

        min-width: 0;

        margin-top:
            0.75rem;

    }

    .subject-grid {

        grid-template-columns: 1fr;

        padding:
            1rem;

    }

    .subject-card {

        min-height: auto;

        grid-template-rows:
            minmax(210px, auto) auto auto;

    }

    .subject-image {

        min-height: 220px;

    }

    .topic-detail {

        grid-template-columns: 1fr;

        padding:
            1rem;

    }

    .subject-video-panel {

        width: 100%;

    }

    .rights-content {

        border-radius: 18px;

    }

    .rights-content {

        padding:
            1rem;

    }

    .rights-header {

        padding:
            1rem;

    }

    .rights-video-frame,
    .rights-section-video {

        min-height: 260px;

    }

    .form-row,
    .avatar-field {

        grid-template-columns: 1fr;

    }

    .avatar-controls {

        justify-content: space-between;

        flex-wrap: wrap;

    }

    .register-message-panel {

        grid-template-columns: 1fr;

        min-height: auto;

    }

    .register-message-video {

        min-height: 240px;

        border-right: none;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.12);

    }

}