/* Shared responsive layer. Loaded after app.css and admin.css so it can
 * normalize the public, member, auth and admin shells without duplicating
 * breakpoint rules in each page stylesheet. */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Keep secondary copy crisp on light backgrounds.  The original neutral was
 * just below comfortable contrast on several small labels and looked washed
 * out on lower-density mobile screens. */
:root {
    --muted: #667089;
}

[data-theme="dark"] {
    --muted: #b2bbd6;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--violet) 42%, transparent);
    outline-offset: 2px;
}

button:disabled,
.button:disabled,
.icon-button:disabled {
    cursor: not-allowed;
    opacity: .58;
    box-shadow: none;
    filter: grayscale(.15);
}

body.modal-open {
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    z-index: 45;
    inset: 0;
    background: rgba(12, 16, 36, .5);
}

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

.modal {
    background: transparent;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(55, 48, 123, .08);
    font-size: 13px;
}

.flash > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
}

.flash > span {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
}

.flash--success,
.form-alert--success {
    border: 1px solid color-mix(in srgb, var(--mint) 38%, var(--line));
    background: color-mix(in srgb, var(--mint) 12%, var(--surface));
    color: #157c68;
}

[data-theme="dark"] .flash--success,
[data-theme="dark"] .form-alert--success {
    color: #84e9d0;
}

.flash--error {
    border-color: color-mix(in srgb, var(--red) 38%, var(--line));
    background: color-mix(in srgb, var(--red) 10%, var(--surface));
    color: #bd4759;
}

[data-theme="dark"] .flash--error {
    color: #ff9dab;
}

.flash--warning {
    border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
    background: color-mix(in srgb, var(--amber) 13%, var(--surface));
    color: #9a6811;
}

[data-theme="dark"] .flash--warning {
    color: #ffd184;
}

.flash--info {
    border-color: color-mix(in srgb, var(--violet) 34%, var(--line));
    background: color-mix(in srgb, var(--violet) 9%, var(--surface));
    color: var(--violet);
}

.flash__close {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin: -6px -7px -6px 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: currentColor;
}

.flash__close:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.flash__close svg {
    width: 16px;
    height: 16px;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

.sidebar {
    overflow: hidden;
}

@media (max-width: 820px) {
    body.sidebar-open {
        overflow: hidden;
    }
}

.sidebar__inner {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}

.sidebar-promo,
.admin-switch,
.sidebar-nav__item,
.brand-lockup,
.admin-mode-chip {
    flex-shrink: 0;
}

.chart-canvas-wrap {
    position: relative;
    min-width: 0;
    height: 245px;
}

.chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.filter-pills,
.settings-tabs {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-pills::-webkit-scrollbar,
.settings-tabs::-webkit-scrollbar {
    display: none;
}

.filter-pill {
    flex: 0 0 auto;
    white-space: nowrap;
}

.landing-section--tinted {
    position: relative;
    max-width: none;
    padding-right: max(22px, calc((100vw - 1156px) / 2));
    padding-left: max(22px, calc((100vw - 1156px) / 2));
    background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 4%, var(--surface)), color-mix(in srgb, var(--mint) 5%, var(--surface)));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-top: 40px;
}

.feature-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.feature-card > span {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 17px;
    place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--violet) 11%, var(--surface));
    color: var(--violet);
}

.feature-card > span svg {
    width: 21px;
    height: 21px;
}

.feature-card p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.faq-section {
    display: grid;
    grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr);
    align-items: start;
    column-gap: 70px;
}

.faq-list {
    display: grid;
    gap: 10px;
}

.faq-list details {
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(55,48,123,.05);
}

.faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 19px;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary svg {
    flex: 0 0 18px;
    color: var(--violet);
    transition: transform .2s ease;
}

.faq-list details[open] summary svg {
    transform: rotate(180deg);
}

.faq-list details p {
    margin: 0;
    padding: 0 19px 18px;
    color: var(--muted);
    font-size: 13px;
}

.faq-more {
    grid-column: 2;
    margin-top: 18px;
}

.public-copy__body > :first-child {
    margin-top: 0;
}

.public-copy__body > :last-child {
    margin-bottom: 0;
}

.public-copy__body h2 {
    margin: 30px 0 9px;
    font-size: 21px;
}

.public-copy__body h3 {
    margin: 23px 0 8px;
}

.public-copy__body p,
.public-copy__body li {
    overflow-wrap: anywhere;
}

.public-copy__body ul,
.public-copy__body ol {
    display: grid;
    gap: 8px;
    padding-left: 22px;
}

.public-copy__body a {
    color: var(--violet);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The floating earnings badge used to cover the second line of the login
 * headline around common laptop widths. */
@media (min-width: 821px) {
    .auth-showcase__content h1 {
        max-width: 540px;
        font-size: clamp(43px, 4.5vw, 62px);
    }

    .auth-floating-card--earn {
        right: 3%;
        top: 55%;
    }
}

.sidebar__inner::-webkit-scrollbar {
    width: 6px;
}

.sidebar__inner::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: color-mix(in srgb, var(--muted) 45%, transparent);
}

.sidebar__inner::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-nav {
    display: none;
}

.hero__visual {
    min-width: 0;
    overflow: hidden;
}

.table-wrap,
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
    overscroll-behavior-inline: contain;
}

.table-wrap::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar {
    height: 8px;
}

.table-wrap::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: color-mix(in srgb, var(--muted) 45%, transparent);
}

.data-table {
    min-width: 620px;
}

.update-grid {
    align-items: stretch;
}

.update-upload-card,
.update-help-card {
    min-width: 0;
}

.update-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 11px;
    color: var(--violet);
    background: #efedff;
}

.update-icon--mint {
    color: var(--mint);
    background: #e5faf5;
}

.update-dropzone {
    display: grid;
    min-height: 160px;
    margin: 6px 0 17px;
    padding: 23px;
    place-items: center;
    gap: 6px;
    border: 1px dashed #bdb7ff;
    border-radius: 14px;
    background: color-mix(in srgb, var(--violet) 4%, var(--surface));
    color: var(--violet);
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
}

.update-dropzone:hover,
.update-dropzone:focus-within {
    border-color: var(--violet);
    background: color-mix(in srgb, var(--violet) 9%, var(--surface));
}

.update-dropzone > svg {
    width: 30px;
    height: 30px;
}

.update-dropzone strong {
    color: var(--ink);
    font-size: 13px;
}

.update-dropzone small {
    color: var(--muted);
    font-size: 10px;
}

.update-dropzone input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.update-safety-list {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.update-safety-list > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--mint);
}

.update-safety-list > div > svg {
    width: 16px;
    flex: 0 0 16px;
    margin-top: 2px;
}

.update-safety-list span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.update-safety-list strong {
    color: var(--ink);
    font-size: 11px;
}

.update-safety-list small,
.update-rules li {
    color: var(--muted);
    font-size: 10px;
}

.update-submit {
    width: 100%;
}

.update-rules {
    display: grid;
    gap: 13px;
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
}

.update-rules li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.45;
}

.update-rules li svg {
    width: 15px;
    flex: 0 0 15px;
    color: var(--mint);
}

.update-rules li:last-child svg {
    color: var(--amber);
}

.update-rules code,
.hash-short {
    padding: 2px 4px;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 10px;
}

.update-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: -7px 0 20px;
    padding: 12px 14px;
    border: 1px solid #c9c4ff;
    border-radius: 11px;
    background: #efedff;
    color: var(--violet);
    font-size: 12px;
}

.update-notice--error {
    border-color: #f2c5cc;
    background: #fff0f2;
    color: var(--red);
}

.update-notice svg {
    width: 17px;
    flex: 0 0 17px;
}

.update-history-card {
    margin-top: 20px;
}

@media (max-width: 820px) {
    .sidebar {
        height: 100dvh;
        max-height: 100dvh;
    }

    .sidebar__inner {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .topbar {
        padding-right: 14px;
        padding-left: 14px;
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .sidebar {
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .topbar__left,
    .topbar__right,
    .page-wrap,
    .panel,
    .card,
    .chart-card {
        min-width: 0;
    }

    .topbar__right {
        gap: 8px;
    }

    .topbar-user__trigger > svg {
        width: 14px;
    }

    .chart-canvas-wrap {
        height: 220px;
    }

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

    .faq-section {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }

    .faq-more {
        grid-column: 1;
        margin-top: -8px;
    }
}

@media (max-width: 560px) {
    .landing-nav {
        gap: 10px;
        padding: 14px 16px;
    }

    .landing-nav .brand {
        min-width: 0;
        gap: 7px;
    }

    .landing-nav .brand__mark {
        width: 31px;
        height: 31px;
        border-radius: 9px;
    }

    .landing-nav .brand__word {
        font-size: 15px;
    }

    .landing-nav .brand__word small {
        display: none;
    }

    .landing-actions {
        min-width: 0;
        gap: 5px;
    }

    .landing-actions .theme-toggle {
        display: none;
    }

    .landing-actions .button {
        padding: 8px 9px;
        font-size: 11px;
    }

    .landing-actions .button svg {
        width: 14px;
    }

    .hero__visual {
        margin-right: -2px;
        margin-left: -2px;
    }

    .toast-stack {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: 12px;
    }

    .toast {
        width: 100%;
        min-width: 0;
    }

    .modal {
        padding: 12px;
    }

    .modal__card {
        max-height: calc(100dvh - 24px);
        padding: 18px;
    }

    .table-card__header {
        padding: 16px;
    }

    .table-card .data-table {
        min-width: 680px;
    }

    .admin-search {
        flex-wrap: wrap;
    }

    .admin-search input {
        flex-basis: calc(100% - 28px);
    }

    .admin-search .btn {
        flex: 1;
    }

    .admin-alert {
        flex-wrap: wrap;
    }

    .admin-alert .btn {
        width: 100%;
        margin-left: 40px;
    }

    .mobile-nav {
        position: fixed;
        z-index: 40;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: 0 -8px 28px #33257714;
    }

    .mobile-nav__item {
        display: flex;
        min-width: 0;
        flex: 1;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        padding: 5px 2px;
        border-radius: 10px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;
    }

    .mobile-nav__item svg {
        width: 18px;
        height: 18px;
    }

    .mobile-nav__item.is-active {
        color: var(--violet);
        background: color-mix(in srgb, var(--violet) 10%, transparent);
    }

    .app-body:not(.app-body--admin) .page-wrap {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .auth-panel {
        padding-right: 18px;
        padding-left: 18px;
    }

    .auth-panel__top {
        margin-bottom: 25px;
    }

    .landing-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        margin-top: 30px;
    }

    .feature-card {
        padding: 20px;
    }

    .faq-list summary {
        padding: 16px;
        font-size: 13px;
    }

    .faq-list details p {
        padding: 0 16px 16px;
        font-size: 12px;
    }

    .landing-footer div {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
    }

    .public-copy {
        padding-top: 54px;
    }

    .public-copy h1 {
        margin-bottom: 18px;
        font-size: clamp(32px, 10vw, 43px);
    }

    .public-copy__body {
        padding: 20px;
        font-size: 14px;
        line-height: 1.75;
    }

    .public-copy__body h2 {
        font-size: 19px;
    }

    .eyebrow,
    .task-card__meta,
    .task-type,
    .task-owner,
    .metric-card__foot,
    .security-item small,
    .quick-links small {
        font-size: 11px;
    }

    .data-table th {
        font-size: 11px;
    }

    .data-table td {
        font-size: 12px;
    }

    .profile-stats strong {
        font-size: clamp(18px, 5.8vw, 24px);
        overflow-wrap: anywhere;
    }

    .wallet-hero small,
    .market-banner p,
    .active-plan small {
        line-height: 1.5;
    }

    .active-plan {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .active-plan small {
        width: 100%;
        margin-left: 0;
    }

    .table-wrap::before,
    .table-scroll::before {
        content: "← Tabloyu yatay kaydır →";
        position: sticky;
        z-index: 2;
        left: 8px;
        display: block;
        width: max-content;
        margin: 0 0 7px;
        padding: 4px 8px;
        border: 1px solid var(--line);
        border-radius: 99px;
        background: var(--surface);
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .01em;
        box-shadow: 0 5px 14px rgba(55, 48, 123, .08);
        pointer-events: none;
    }

    .data-table th,
    .data-table td {
        padding-right: 12px;
        padding-left: 12px;
        line-height: 1.45;
    }

    .data-table td strong,
    .data-table td small {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    .landing-actions .button {
        padding-right: 7px;
        padding-left: 7px;
        font-size: 10px;
    }

    .landing-actions .button svg {
        display: none;
    }
}

/* Task discovery enhancements */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.task-card__save {
    margin-left: auto;
}

.task-card__save .icon-button {
    width: 32px;
    height: 32px;
    border-color: var(--line);
    background: var(--surface-2);
}

.task-card__save .icon-button.is-saved {
    color: var(--violet);
    border-color: #d5d0ff;
    background: #efedff;
}

.task-card__save .icon-button:focus-visible,
.task-detail__actions .button:focus-visible {
    outline: 3px solid #7163f544;
    outline-offset: 2px;
}

.task-card__meta {
    flex-wrap: wrap;
}

.task-deadline {
    color: var(--violet);
    font-weight: 700;
}

.task-deadline.is-expired {
    color: var(--red);
}

.task-progress {
    height: 5px;
    margin: 0 0 13px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--surface-2);
}

.task-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint), var(--violet));
    transition: width .3s ease;
}

.task-progress--light {
    width: 100%;
    margin: 17px 0 5px;
    background: #ffffff2e;
}

.task-progress--light span {
    background: #aef5df;
}

.task-detail__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.task-detail__actions form {
    margin: 0;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.filter-pill svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 560px) {
    .task-detail__actions {
        width: 100%;
    }

    .task-detail__actions .button {
        flex: 1;
    }

    .task-card__meta {
        gap: 7px 11px;
    }
}

/* -------------------------------------------------------------------------
 * Gamified member experience
 * -------------------------------------------------------------------------
 * The member surface uses a brighter, reward-led visual language.  Selectors
 * are scoped away from .app-body--admin so the administrator's information
 * density and contrast remain unchanged.
 */
.app-body:not(.app-body--admin) {
    --game-surface-glow: color-mix(in srgb, var(--game-violet) 6%, var(--surface));
    background:
        radial-gradient(circle at 88% -10%, color-mix(in srgb, var(--game-pink) 14%, transparent), transparent 32rem),
        radial-gradient(circle at 5% 36%, color-mix(in srgb, var(--game-cyan) 10%, transparent), transparent 28rem),
        var(--bg);
}

[data-theme="dark"] .app-body:not(.app-body--admin) {
    --game-surface-glow: color-mix(in srgb, var(--game-violet) 15%, var(--surface));
    background:
        radial-gradient(circle at 88% -10%, color-mix(in srgb, var(--game-pink) 15%, transparent), transparent 32rem),
        radial-gradient(circle at 5% 36%, color-mix(in srgb, var(--game-cyan) 10%, transparent), transparent 28rem),
        var(--bg);
}

.app-body:not(.app-body--admin) .ambient--one {
    background: var(--game-pink);
    opacity: .16;
}

.app-body:not(.app-body--admin) .ambient--two {
    background: var(--game-cyan);
    opacity: .14;
}

.app-body:not(.app-body--admin) .sidebar {
    border-right-color: color-mix(in srgb, var(--game-violet) 14%, var(--line));
    background: color-mix(in srgb, var(--surface) 93%, var(--game-violet));
    box-shadow: 8px 0 35px color-mix(in srgb, var(--game-violet) 7%, transparent);
}

.app-body:not(.app-body--admin) .brand__mark {
    background: var(--game-gradient);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--game-violet) 32%, transparent);
}

.app-body:not(.app-body--admin) .sidebar-nav__item {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.app-body:not(.app-body--admin) .sidebar-nav__item:hover {
    background: color-mix(in srgb, var(--game-violet) 9%, var(--surface));
    border-color: color-mix(in srgb, var(--game-violet) 17%, var(--line));
    color: var(--game-violet);
}

.app-body:not(.app-body--admin) .sidebar-nav__item.is-active {
    background: var(--game-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 9px 20px color-mix(in srgb, var(--game-violet) 23%, transparent);
}

.app-body:not(.app-body--admin) .sidebar-nav__item.is-active::after {
    position: absolute;
    top: -25px;
    right: -10px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #ffffff26;
    content: "";
}

.app-body:not(.app-body--admin) .sidebar-nav__item.is-active .sidebar__nav-icon,
.app-body:not(.app-body--admin) .sidebar-nav__item.is-active .sidebar-nav__icon {
    color: #fff;
}

.app-body:not(.app-body--admin) .nav-badge {
    background: color-mix(in srgb, var(--game-orange) 25%, var(--surface));
    color: #bb6c12;
}

.app-body:not(.app-body--admin) .sidebar-nav__item.is-active .nav-badge {
    background: #ffffff38;
    color: #fff;
}

.app-body:not(.app-body--admin) .sidebar-promo {
    background: linear-gradient(145deg, #5a3bd2 0%, #a04fff 58%, #ef65b0 100%);
    box-shadow: 0 15px 30px color-mix(in srgb, var(--game-violet) 24%, transparent);
}

.app-body:not(.app-body--admin) .topbar {
    border-bottom-color: color-mix(in srgb, var(--game-violet) 12%, var(--line));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
}

.app-body:not(.app-body--admin) .topbar-user__trigger {
    padding: 4px 7px 4px 4px;
    border: 1px solid transparent;
    border-radius: 99px;
    transition: .2s ease;
}

.app-body:not(.app-body--admin) .topbar-user__trigger:hover {
    border-color: color-mix(in srgb, var(--game-violet) 17%, var(--line));
    background: color-mix(in srgb, var(--game-violet) 7%, var(--surface));
}

.app-body:not(.app-body--admin) .avatar--gradient {
    background: linear-gradient(135deg, var(--game-pink), var(--game-violet) 52%, var(--game-cyan));
    box-shadow: 0 6px 15px color-mix(in srgb, var(--game-violet) 22%, transparent);
}

.app-body:not(.app-body--admin) .page-wrap {
    position: relative;
}

.app-body:not(.app-body--admin) .page-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 25px;
    padding: 25px 27px;
    border: 1px solid color-mix(in srgb, var(--game-violet) 13%, var(--line));
    border-radius: 23px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--game-violet) 10%, var(--surface)), color-mix(in srgb, var(--game-pink) 7%, var(--surface)) 62%, color-mix(in srgb, var(--game-cyan) 8%, var(--surface)));
    box-shadow: var(--game-shadow-soft);
}

.app-body:not(.app-body--admin) .page-intro::after {
    position: absolute;
    z-index: -1;
    right: 7%;
    bottom: -52px;
    width: 160px;
    height: 160px;
    border: 1px solid color-mix(in srgb, var(--game-pink) 19%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 24px color-mix(in srgb, var(--game-pink) 5%, transparent), 0 0 0 48px color-mix(in srgb, var(--game-pink) 3%, transparent);
    content: "";
    pointer-events: none;
}

.app-body:not(.app-body--admin) .page-intro h1 {
    letter-spacing: -1.8px;
}

.app-body:not(.app-body--admin) .page-intro h1 .wave {
    display: inline-block;
    color: var(--game-orange);
    transform-origin: 70% 70%;
    animation: game-sparkle 2.6s ease-in-out infinite;
}

.app-body:not(.app-body--admin) .button--primary {
    background: var(--game-gradient);
    box-shadow: 0 11px 24px color-mix(in srgb, var(--game-violet) 28%, transparent);
}

.app-body:not(.app-body--admin) .metric-card,
.app-body:not(.app-body--admin) .panel,
.app-body:not(.app-body--admin) .task-card,
.app-body:not(.app-body--admin) .profile-hero,
.app-body:not(.app-body--admin) .public-copy__body {
    border-color: color-mix(in srgb, var(--game-violet) 10%, var(--line));
    box-shadow: var(--game-shadow-soft);
}

.app-body:not(.app-body--admin) .metric-card {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.app-body:not(.app-body--admin) .metric-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--game-shadow);
}

.app-body:not(.app-body--admin) .metric-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--game-gradient);
    content: "";
}

.app-body:not(.app-body--admin) .metric-card:nth-child(2)::before {
    background: linear-gradient(90deg, var(--game-cyan), #62e3a7);
}

.app-body:not(.app-body--admin) .metric-card:nth-child(3)::before {
    background: linear-gradient(90deg, var(--game-violet), var(--game-purple));
}

.app-body:not(.app-body--admin) .metric-card:nth-child(4)::before {
    background: linear-gradient(90deg, var(--game-orange), #ff7e8e);
}

.app-body:not(.app-body--admin) .metric-card--hero {
    background: var(--game-gradient);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--game-violet) 28%, transparent);
}

.app-body:not(.app-body--admin) .metric-card--hero::after {
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 145px;
    height: 145px;
    border: 1px solid #ffffff35;
    border-radius: 50%;
    box-shadow: 0 0 0 18px #ffffff10, 0 0 0 37px #ffffff08;
    content: "";
}

.app-body:not(.app-body--admin) .metric-card--hero .metric-icon {
    background: #ffffff2c;
}

.app-body:not(.app-body--admin) .metric-icon {
    border-radius: 12px;
    background: color-mix(in srgb, var(--game-violet) 11%, var(--surface));
    color: var(--game-violet);
}

.app-body:not(.app-body--admin) .metric-icon--mint {
    background: color-mix(in srgb, var(--game-cyan) 14%, var(--surface));
    color: #199e99;
}

.app-body:not(.app-body--admin) .metric-icon--amber {
    background: color-mix(in srgb, var(--game-orange) 17%, var(--surface));
    color: #c67b17;
}

.app-body:not(.app-body--admin) .panel {
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 98%, var(--game-violet)), var(--surface));
}

.app-body:not(.app-body--admin) .panel-heading h2 {
    letter-spacing: -.7px;
}

.app-body:not(.app-body--admin) .quick-links a {
    border: 1px solid transparent;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.app-body:not(.app-body--admin) .quick-links a:hover {
    border-color: color-mix(in srgb, var(--game-violet) 16%, var(--line));
    background: color-mix(in srgb, var(--game-violet) 7%, var(--surface));
    transform: translateX(3px);
}

.app-body:not(.app-body--admin) .quick-icon--violet {
    background: color-mix(in srgb, var(--game-violet) 13%, var(--surface));
    color: var(--game-violet);
}

.app-body:not(.app-body--admin) .quick-icon--mint {
    background: color-mix(in srgb, var(--game-cyan) 15%, var(--surface));
    color: #1b9e97;
}

.app-body:not(.app-body--admin) .quick-icon--amber {
    background: color-mix(in srgb, var(--game-orange) 18%, var(--surface));
    color: #c57a14;
}

.app-body:not(.app-body--admin) .task-row {
    border-bottom-color: color-mix(in srgb, var(--game-violet) 10%, var(--line));
    border-radius: 12px;
    transition: transform .2s ease, background .2s ease;
}

.app-body:not(.app-body--admin) .task-row:hover {
    background: color-mix(in srgb, var(--game-violet) 6%, var(--surface));
    transform: translateX(3px);
}

.app-body:not(.app-body--admin) .task-row__icon {
    background: color-mix(in srgb, var(--game-violet) 11%, var(--surface));
    color: var(--game-violet);
}

.app-body:not(.app-body--admin) .task-row__reward,
.app-body:not(.app-body--admin) .task-card__bottom strong {
    color: var(--game-violet);
}

.app-body:not(.app-body--admin) .task-card {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.app-body:not(.app-body--admin) .task-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--game-gradient);
    content: "";
}

.app-body:not(.app-body--admin) .task-card:nth-child(3n + 2)::before {
    background: linear-gradient(90deg, var(--game-cyan), #6be1a4);
}

.app-body:not(.app-body--admin) .task-card:nth-child(3n)::before {
    background: linear-gradient(90deg, var(--game-orange), var(--game-pink));
}

.app-body:not(.app-body--admin) .task-card:hover {
    border-color: color-mix(in srgb, var(--game-violet) 28%, var(--line));
    box-shadow: var(--game-shadow);
}

.app-body:not(.app-body--admin) .task-card h3 {
    letter-spacing: -.25px;
}

.app-body:not(.app-body--admin) .task-type {
    padding: 4px 7px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--game-violet) 10%, var(--surface));
    color: var(--game-violet);
    font-weight: 700;
}

.app-body:not(.app-body--admin) .task-card__bottom {
    border-top-color: color-mix(in srgb, var(--game-violet) 10%, var(--line));
}

.app-body:not(.app-body--admin) .task-progress {
    height: 7px;
    background: color-mix(in srgb, var(--game-violet) 10%, var(--surface-2));
}

.app-body:not(.app-body--admin) .task-progress span {
    background: linear-gradient(90deg, var(--game-cyan), var(--game-violet), var(--game-pink));
}

.app-body:not(.app-body--admin) .task-card__save .icon-button.is-saved {
    background: color-mix(in srgb, var(--game-orange) 17%, var(--surface));
    border-color: color-mix(in srgb, var(--game-orange) 40%, var(--line));
    color: #c77b12;
}

.app-body:not(.app-body--admin) .profile-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    background: var(--game-gradient);
    color: #fff;
    box-shadow: 0 19px 42px color-mix(in srgb, var(--game-violet) 23%, transparent);
}

.app-body:not(.app-body--admin) .profile-hero::after {
    position: absolute;
    z-index: -1;
    right: 8%;
    bottom: -68px;
    width: 190px;
    height: 190px;
    border: 1px solid #ffffff38;
    border-radius: 50%;
    box-shadow: 0 0 0 25px #ffffff0e, 0 0 0 52px #ffffff09;
    content: "";
}

.app-body:not(.app-body--admin) .profile-hero .eyebrow,
.app-body:not(.app-body--admin) .profile-hero p {
    color: #eeeaff;
}

.app-body:not(.app-body--admin) .profile-hero .button--soft {
    border-color: #ffffff55;
    background: #ffffff1c;
    color: #fff;
}

.app-body:not(.app-body--admin) .profile-avatar {
    border: 4px solid #ffffff80;
    box-shadow: 0 0 0 4px #ffffff1c, 0 10px 23px #3c228a54;
}

.app-body:not(.app-body--admin) .profile-stats div {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--game-violet) 10%, var(--line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--game-violet) 7%, var(--surface)), var(--surface));
}

.app-body:not(.app-body--admin) .profile-stats div:nth-child(2) {
    background: linear-gradient(145deg, color-mix(in srgb, var(--game-cyan) 10%, var(--surface)), var(--surface));
}

.app-body:not(.app-body--admin) .profile-stats div:nth-child(3) {
    background: linear-gradient(145deg, color-mix(in srgb, var(--game-orange) 12%, var(--surface)), var(--surface));
}

.app-body:not(.app-body--admin) .profile-stats strong {
    color: var(--game-ink);
}

[data-theme="dark"] .app-body:not(.app-body--admin) .profile-stats strong {
    color: var(--ink);
}

.app-body:not(.app-body--admin) .security-item {
    border-bottom-color: color-mix(in srgb, var(--game-violet) 9%, var(--line));
}

.app-body:not(.app-body--admin) .security-item .quick-icon {
    border-radius: 12px;
}

.app-body:not(.app-body--admin) .notification-row.is-unread {
    background: linear-gradient(90deg, color-mix(in srgb, var(--game-violet) 11%, transparent), transparent);
}

/* Optional gamification primitives used by dashboard/profile extensions. */
.app-body:not(.app-body--admin) .gamification-hero,
.app-body:not(.app-body--admin) .level-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    border-radius: 21px;
    background: var(--game-gradient);
    color: #fff;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--game-violet) 25%, transparent);
}

.app-body:not(.app-body--admin) .gamification-hero::after,
.app-body:not(.app-body--admin) .level-card::after {
    position: absolute;
    z-index: -1;
    right: -30px;
    bottom: -65px;
    width: 190px;
    height: 190px;
    border: 1px solid #ffffff42;
    border-radius: 50%;
    box-shadow: 0 0 0 23px #ffffff12, 0 0 0 48px #ffffff09;
    content: "";
}

.app-body:not(.app-body--admin) .gamification-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(190px, .75fr);
    gap: 20px;
    align-items: center;
    margin-bottom: 18px;
    padding: 26px 28px;
}

.app-body:not(.app-body--admin) .gamification-hero__copy,
.app-body:not(.app-body--admin) .level-card__copy {
    min-width: 0;
}

.app-body:not(.app-body--admin) .gamification-hero__copy h2,
.app-body:not(.app-body--admin) .level-card h2 {
    margin: 7px 0 5px;
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
}

.app-body:not(.app-body--admin) .gamification-hero__copy p,
.app-body:not(.app-body--admin) .level-card p {
    margin: 0;
    color: #eeeaff;
    font-size: 12px;
}

.app-body:not(.app-body--admin) .level-card {
    padding: 22px;
}

.app-body:not(.app-body--admin) .level-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.app-body:not(.app-body--admin) .level-card__badge,
.app-body:not(.app-body--admin) .level-badge {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 2px solid #ffffff66;
    border-radius: 16px;
    background: #ffffff20;
    color: #fff;
    box-shadow: 0 8px 18px #3d24994a;
}

.app-body:not(.app-body--admin) .level-card__badge svg,
.app-body:not(.app-body--admin) .level-badge svg {
    width: 27px;
    height: 27px;
}

.app-body:not(.app-body--admin) .level-number {
    color: #fff;
    font: 800 34px var(--font-display);
    letter-spacing: -1px;
}

.app-body:not(.app-body--admin) .level-label {
    color: #eeeaff;
    font-size: 11px;
    font-weight: 700;
}

.app-body:not(.app-body--admin) .xp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    color: #eeeaff;
    font-size: 11px;
    font-weight: 700;
}

.app-body:not(.app-body--admin) .xp-meta strong {
    color: #fff;
}

.app-body:not(.app-body--admin) .xp-track,
.app-body:not(.app-body--admin) .xp-progress {
    height: 10px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: #ffffff29;
}

.app-body:not(.app-body--admin) .xp-track > span,
.app-body:not(.app-body--admin) .xp-progress > span {
    display: block;
    width: var(--xp, 0%);
    height: 100%;
    min-width: 5px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--game-lime), var(--game-cyan));
    box-shadow: 0 0 14px #a9f6d1aa;
    transition: width .5s ease;
}

.app-body:not(.app-body--admin) .achievement-grid,
.app-body:not(.app-body--admin) .badge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.app-body:not(.app-body--admin) .achievement-card,
.app-body:not(.app-body--admin) .badge-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--game-violet) 11%, var(--line));
    border-radius: 15px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--game-violet) 8%, var(--surface)), var(--surface));
    box-shadow: var(--game-shadow-soft);
    transition: transform .2s ease, box-shadow .2s ease;
}

.app-body:not(.app-body--admin) .achievement-card:hover,
.app-body:not(.app-body--admin) .badge-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--game-shadow);
}

.app-body:not(.app-body--admin) .achievement-card__icon,
.app-body:not(.app-body--admin) .badge-card__icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--game-orange), var(--game-pink));
    color: #fff;
}

.app-body:not(.app-body--admin) .achievement-card:nth-child(3n + 2) .achievement-card__icon,
.app-body:not(.app-body--admin) .badge-card:nth-child(3n + 2) .badge-card__icon {
    background: linear-gradient(135deg, var(--game-cyan), #45b6ff);
}

.app-body:not(.app-body--admin) .achievement-card:nth-child(3n) .achievement-card__icon,
.app-body:not(.app-body--admin) .badge-card:nth-child(3n) .badge-card__icon {
    background: linear-gradient(135deg, var(--game-violet), var(--game-purple));
}

.app-body:not(.app-body--admin) .achievement-card strong,
.app-body:not(.app-body--admin) .achievement-card small,
.app-body:not(.app-body--admin) .badge-card strong,
.app-body:not(.app-body--admin) .badge-card small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-body:not(.app-body--admin) .achievement-card small,
.app-body:not(.app-body--admin) .badge-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.app-body:not(.app-body--admin) .streak-card,
.app-body:not(.app-body--admin) .daily-challenge {
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--game-orange) 24%, var(--line));
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--game-orange) 15%, var(--surface)), color-mix(in srgb, var(--game-pink) 7%, var(--surface)));
    box-shadow: var(--game-shadow-soft);
}

.app-body:not(.app-body--admin) .streak-card__head,
.app-body:not(.app-body--admin) .daily-challenge__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.app-body:not(.app-body--admin) .streak-card__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 15px;
}

.app-body:not(.app-body--admin) .streak-card__days span {
    display: grid;
    min-width: 0;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 9px;
    background: var(--surface);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.app-body:not(.app-body--admin) .streak-card__days span.is-complete,
.app-body:not(.app-body--admin) .streak-card__days span.is-active {
    background: linear-gradient(135deg, var(--game-orange), var(--game-pink));
    color: #fff;
    box-shadow: 0 5px 13px color-mix(in srgb, var(--game-pink) 27%, transparent);
}

@keyframes game-sparkle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    45% { transform: rotate(13deg) scale(1.12); }
    70% { transform: rotate(-5deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .app-body:not(.app-body--admin) .page-intro h1 .wave {
        animation: none;
    }
}

@media (max-width: 820px) {
    .app-body:not(.app-body--admin) .page-intro {
        padding: 22px 20px;
    }

    .app-body:not(.app-body--admin) .gamification-hero {
        grid-template-columns: 1fr;
    }

    .app-body:not(.app-body--admin) .achievement-grid,
    .app-body:not(.app-body--admin) .badge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-body:not(.app-body--admin) .sidebar {
        box-shadow: 20px 0 45px color-mix(in srgb, var(--game-violet) 18%, transparent);
    }
}

@media (max-width: 560px) {
    .app-body:not(.app-body--admin) .page-intro {
        margin-right: -2px;
        margin-left: -2px;
        padding: 20px 17px;
        border-radius: 18px;
    }

    .app-body:not(.app-body--admin) .page-intro h1 {
        font-size: clamp(25px, 8vw, 35px);
    }

    .app-body:not(.app-body--admin) .metric-card {
        min-height: 126px;
        padding: 16px 14px;
    }

    .app-body:not(.app-body--admin) .metric-card strong {
        font-size: 21px;
    }

    .app-body:not(.app-body--admin) .profile-hero {
        align-items: flex-start;
        padding: 21px 18px;
    }

    .app-body:not(.app-body--admin) .profile-hero h1 {
        font-size: 28px;
    }

    .app-body:not(.app-body--admin) .achievement-grid,
    .app-body:not(.app-body--admin) .badge-grid {
        grid-template-columns: 1fr;
    }

    .app-body:not(.app-body--admin) .achievement-card,
    .app-body:not(.app-body--admin) .badge-card {
        padding: 12px;
    }

    .app-body:not(.app-body--admin) .gamification-hero,
    .app-body:not(.app-body--admin) .level-card {
        border-radius: 18px;
        padding: 20px 18px;
    }

    .app-body:not(.app-body--admin) .streak-card,
    .app-body:not(.app-body--admin) .daily-challenge {
        padding: 17px;
    }
}

/* Compatibility aliases for the concise gamification markup used by the
 * dashboard/profile templates.  The dedicated play-theme stylesheet can
 * refine these further; these rules keep the components complete on their
 * own and during incremental cPanel upgrades. */
.app-body:not(.app-body--admin) .level-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 26px 30px;
    border: 0;
    border-radius: 21px;
    background: var(--game-gradient);
    color: #fff;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--game-violet) 25%, transparent);
}

.app-body:not(.app-body--admin) .level-hero::after {
    position: absolute;
    z-index: -1;
    right: -45px;
    bottom: -82px;
    width: 220px;
    height: 220px;
    border: 28px solid #ffffff16;
    border-radius: 50%;
    content: "";
}

.app-body:not(.app-body--admin) .level-hero__copy,
.app-body:not(.app-body--admin) .level-hero__progress {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.app-body:not(.app-body--admin) .level-hero__copy h2 {
    margin: 7px 0 5px;
    color: #fff;
    font-size: 27px;
}

.app-body:not(.app-body--admin) .level-hero__copy .eyebrow,
.app-body:not(.app-body--admin) .level-hero__copy p,
.app-body:not(.app-body--admin) .level-hero__progress small {
    color: #eeeaff;
}

.app-body:not(.app-body--admin) .level-hero__copy p {
    margin: 0;
    font-size: 12px;
}

.app-body:not(.app-body--admin) .level-hero__progress {
    width: min(330px, 43%);
}

.app-body:not(.app-body--admin) .level-hero__progress strong {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 13px;
}

.app-body:not(.app-body--admin) .level-progress {
    height: 11px;
    overflow: hidden;
    border: 2px solid #ffffff4c;
    border-radius: 99px;
    background: #2c0f654f;
}

.app-body:not(.app-body--admin) .level-progress span {
    display: block;
    height: 100%;
    min-width: 5px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--game-cyan), var(--game-lime), #ffd36e);
    box-shadow: 0 0 13px #a9f6d180;
}

.app-body:not(.app-body--admin) .level-hero__progress small {
    display: block;
    margin-top: 7px;
    font-size: 10px;
}

.app-body:not(.app-body--admin) .badge-tile {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--game-violet) 11%, var(--line));
    border-radius: 15px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--game-violet) 8%, var(--surface)), var(--surface));
    box-shadow: var(--game-shadow-soft);
}

.app-body:not(.app-body--admin) .badge-tile__icon,
.app-body:not(.app-body--admin) .streak-card__icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--game-orange), var(--game-pink));
    color: #fff;
}

.app-body:not(.app-body--admin) .badge-tile strong,
.app-body:not(.app-body--admin) .badge-tile small,
.app-body:not(.app-body--admin) .streak-card strong,
.app-body:not(.app-body--admin) .streak-card small {
    display: block;
}

.app-body:not(.app-body--admin) .badge-tile small,
.app-body:not(.app-body--admin) .streak-card small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
}

.app-body:not(.app-body--admin) .streak-card {
    display: flex;
    align-items: center;
    gap: 13px;
}

.app-body:not(.app-body--admin) .streak-card > span:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.app-body:not(.app-body--admin) .streak-card > .text-link {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .app-body:not(.app-body--admin) .level-hero {
        display: block;
        padding: 22px;
    }

    .app-body:not(.app-body--admin) .level-hero__progress {
        width: 100%;
        margin-top: 19px;
    }

    .app-body:not(.app-body--admin) .streak-card {
        align-items: flex-start;
        flex-wrap: wrap;
    }

.app-body:not(.app-body--admin) .streak-card > .text-link {
        width: 100%;
        padding-left: 53px;
    }
}