/* Shared Reading/Writing trainer CSS extracted from duplicated study page styles. */

.app-shell {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 1 auto;
    }

.scoreline {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 18px;
        font-size: 15px;
    }

.hiragana-wrap {
        min-height: 162px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }

.hiragana {
        font-size: 128px;
        line-height: 1;
        transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
        text-shadow: 0 0 18px rgba(255,255,255,0.08);
    }

.flash-correct {
        color: #72ffad;
        text-shadow: 0 0 24px rgba(114,255,173,0.45);
        transform: scale(1.05);
    }

.flash-wrong {
        color: #ff6a6a;
        text-shadow: 0 0 24px rgba(255,106,106,0.35);
        transform: scale(1.03);
    }

.hint {
        margin-top: 10px;
        min-height: 22px;
        color: var(--muted);
        font-size: 16px;
        letter-spacing: 1px;
    }

.combo-tier-notice {
        min-height: 22px;
        margin-top: 8px;
        font-size: 14px;
        font-weight: 700;
        color: #ffd76a;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.22s ease, transform 0.22s ease;
        pointer-events: none;
    }

.combo-tier-notice.show {
        opacity: 1;
        transform: translateY(0);
    }

.daily-badge {
        display: none;
        margin: 0 auto 12px;
        width: fit-content;
        background: #2f2510;
        border: 1px solid #8e6b22;
        color: #ffe39a;
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.4px;
    }

body.daily-challenge-active .daily-badge {
        display: inline-block;
    }

body.daily-challenge-active .main {
        border-color: #8e6b22;
        box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255, 215, 122, 0.12);
    }

body.daily-challenge-active {
        background: radial-gradient(circle at top, #3a2f10 0%, var(--bg-1) 58%);
    }

.input-wrap { margin-top: 8px; }

input[type="text"], input[type="number"], textarea {
        width: min(260px, 90%);
        background: #232323;
        color: var(--text);
        border: 1px solid #4a4a4a;
        border-radius: 12px;
        font-size: 24px;
        text-align: center;
        padding: 12px 14px;
        outline: none;
    }

input[type="number"] { font-size: 18px; }

input[type="text"]:disabled,
    input[type="number"]:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.trial-config {
        display: none;
        margin-top: 14px;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }

.trial-box {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }

.trial-box label {
        font-size: 13px;
        color: var(--muted);
    }

.trial-box input { width: 120px; }

.game-over {
        margin-top: 16px;
        display: none;
    }

.game-over-title {
        color: #ff8a8a;
        margin-bottom: 10px;
        font-size: 22px;
        font-weight: 700;
    }

.game-over-answer {
        color: #ddd;
        font-size: 16px;
        margin-bottom: 10px;
    }

.btn {
        appearance: none;
        border: 1px solid #3a3a3a;
        background: #252525;
        color: var(--text);
        border-radius: 10px;
        padding: 10px 14px;
        cursor: pointer;
        font-size: 15px;
        transition: all 0.15s ease;
    }

.btn-danger {
        background: #472323;
        border-color: #6c3030;
    }

.btn-danger:hover { background: #5b2c2c; }

.start-wrap,
    .session-actions {
        margin-top: 14px;
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

.left-panel { left: 12px; }

.right-panel { right: 12px; }

.panel-content {
        padding: 12px;
        display: block;
        overflow-y: auto;
        min-height: 0;
    }

.panel-content.hidden { display: none; }

.heatmap {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

.cell {
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        user-select: none;
        border: 1px solid rgba(255,255,255,0.08);
    }

.cell.combo {
        font-size: 16px;
        letter-spacing: -0.04em;
        padding: 2px;
    }

.score-block h3 {
        margin: 0 0 10px;
        font-size: 16px;
        text-align: center;
    }

.score-subtitle {
        margin: 10px 0 6px;
        color: var(--muted);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.score-row:last-child { border-bottom: none; }

.popup-title {
        font-size: 22px;
        margin-bottom: 6px;
    }

.tab-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

.tab-button {
        text-align: center;
        padding: 8px 12px;
        cursor: pointer;
        user-select: none;
        font-weight: 700;
        border-right: 1px solid var(--border);
    }

.tab-button:last-child { border-right: none; }

.drawer-content.open { display: block; }

.section-title {
        margin: 0 0 10px;
        font-size: 16px;
        text-align: center;
    }

.button-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 10px;
    }

.toggle-btn.disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.nav-btn {
        display: block;
        width: 100%;
        text-decoration: none;
        background: #1f2f47;
        border: 1px solid #36527c;
        border-radius: 10px;
        padding: 11px 12px;
        text-align: center;
        color: var(--text);
        font-size: 15px;
        font-weight: 600;
    }

.nav-btn:hover {
        background: #294061;
        border-color: #66a8ff;
    }

.nav-btn-small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 8px;
    }

.beta-badge {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 999px;
        border: 1px solid #7a6230;
        background: #3a3016;
        color: #f3d27a;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        line-height: 1.2;
    }

.rows-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
        gap: 10px;
    }

.options-stack {
        display: grid;
        gap: 18px;
        width: min(900px, 100%);
        margin: 0 auto;
    }

.bottom-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

.muted-note {
        margin-top: 8px;
        color: var(--muted);
        font-size: 12px;
        text-align: center;
    }

.file-input { display: none; }

.version-tag {
        text-align: center;
        color: var(--muted);
        font-size: 13px;
        margin-top: 4px;
    }

.modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 100;
        padding: 20px;
        overflow-y: auto;
    }

.modal-backdrop.open { display: flex; }

.modal {
        width: min(520px, 100%);
        max-height: min(85vh, 760px);
        overflow-y: auto;
        background: #181818;
        border: 1px solid var(--border);
        border-radius: 18px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.45);
        padding: 22px;
    }

.modal h2 {
        margin-top: 0;
        margin-bottom: 14px;
    }

.modal-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }

.stat-card {
        background: #222;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px;
    }

.stat-card .label {
        color: var(--muted);
        font-size: 13px;
        margin-bottom: 6px;
    }

.stat-card .value {
        font-size: 22px;
        font-weight: 700;
    }

.session-list {
        background: #222;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px;
        margin-top: 10px;
        text-align: left;
    }

.session-list h3 {
        margin: 0 0 10px;
        font-size: 16px;
    }

.session-list-item:last-child { border-bottom: none; }

.modal-actions {
        position: sticky;
        bottom: 0;
        background: #181818;
        padding-top: 12px;
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
    }

.import-modal textarea {
        width: 100%;
        min-height: 180px;
        font-size: 13px;
        text-align: left;
        resize: vertical;
        line-height: 1.4;
    }

body.mobile-mode {
        align-items: flex-start;
        padding: 14px;
    }

body.mobile-mode .app-shell {
        display: block;
        max-width: 100%;
    }

body.mobile-mode .main {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 12px;
        padding: 22px 18px 240px;
    }

body.mobile-mode .hiragana { font-size: 108px; }

body.mobile-mode .score-pill { padding: 10px 12px; }

body.mobile-mode input[type="text"] {
        width: 100%;
        max-width: 100%;
        font-size: 22px;
    }

body.mobile-mode .toggle-btn {
        padding: 14px 12px;
        font-size: 16px;
    }

body.mobile-mode .rows-grid {
        grid-template-columns: repeat(3, 1fr);
    }

body.mobile-mode .button-grid {
        grid-template-columns: repeat(2, 1fr);
    }

body.mobile-mode .left-panel,
    body.mobile-mode .right-panel {
        position: static;
        width: 100%;
        max-height: none;
        margin: 0 auto 12px;
    }

body.mobile-mode .popup {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
    }

@media (max-width: 1180px) {
        .left-panel, .right-panel { width: 220px; }
    }

@media (max-width: 920px) {
        body {
            align-items: flex-start;
            padding-top: 18px;
        }

        .left-panel { left: 10px; }
        .right-panel { right: 10px; }
        .left-panel, .right-panel { width: 200px; }
        .main { padding-bottom: 220px; }
    }

@media (max-width: 760px) {
        body {
            display: block;
            padding: 12px;
            overflow: auto;
        }

        .app-shell { display: block; }

        .main {
            width: 100%;
            margin: 0 auto 12px;
        }

        .left-panel,
        .right-panel {
            position: static;
            width: 100%;
            max-height: none;
            margin-top: 12px;
        }

        .modal {
            width: 100%;
            max-height: 88vh;
            padding: 18px;
            border-radius: 14px;
        }

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

        .drawer-content {
            min-height: 320px;
            max-height: 55vh;
        }
    }

.test-badge {
        display: none;
    }

body.test-mode-active #testBadge {
        display: inline-block !important;
    }

.study-nav {
        position: relative;
        width: min(1120px, 100%);
        margin: 0 auto 14px;
        z-index: 80;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 10px 12px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(18,22,32,0.86), rgba(10,12,18,0.74));
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 18px 48px rgba(0,0,0,0.34);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        transition: transform 0.24s ease, opacity 0.24s ease;
    }

body.study-nav-hidden .study-nav {
        display: none;
    }

.study-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        text-decoration: none;
        color: var(--text);
        padding: 4px 8px 4px 4px;
        border-radius: 999px;
    }

.study-mark {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        font-weight: 900;
        letter-spacing: -0.08em;
        background:
            radial-gradient(circle at 26% 22%, rgba(255,255,255,0.22), transparent 28%),
            linear-gradient(135deg, rgba(125,181,255,0.95), rgba(181,150,255,0.95));
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 10px 22px rgba(0,0,0,0.24);
    }

.study-mark.reading-mark {
        background:
            radial-gradient(circle at 26% 22%, rgba(255,255,255,0.22), transparent 28%),
            linear-gradient(135deg, rgba(103,215,139,0.96), rgba(132,187,255,0.86));
        color: #061018;
    }

.study-mark.writing-mark {
        background:
            radial-gradient(circle at 26% 22%, rgba(255,255,255,0.22), transparent 28%),
            linear-gradient(135deg, rgba(102,168,255,0.96), rgba(182,148,255,0.88));
        color: #061018;
    }

.study-brand-text {
        display: grid;
        gap: 1px;
        line-height: 1.1;
    }

.study-platform {
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.13em;
        text-transform: uppercase;
    }

.study-title {
        color: #fff;
        font-size: 14px;
        font-weight: 850;
        white-space: nowrap;
    }

.study-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

.study-link,
    .study-nav-btn {
        appearance: none;
        border: 1px solid rgba(255,255,255,0.09);
        background: rgba(255,255,255,0.045);
        color: var(--text);
        text-decoration: none;
        border-radius: 999px;
        padding: 9px 12px;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
    }

.study-link:hover,
    .study-nav-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.22);
    }

.study-link.atlas:hover { border-color: rgba(182,148,255,0.55); background: rgba(182,148,255,0.13); color: #ede4ff; }

.study-link.kana:hover { border-color: rgba(246,211,138,0.55); background: rgba(246,211,138,0.12); color: #fff0c3; }

.study-link.reading:hover { border-color: rgba(103,215,139,0.55); background: rgba(103,215,139,0.12); color: #c9f9d9; }

.study-link.writing:hover { border-color: rgba(102,168,255,0.55); background: rgba(102,168,255,0.13); color: #d8e8ff; }

.study-link.results:hover { border-color: rgba(246,211,138,0.55); background: rgba(246,211,138,0.12); color: #fff0c3; }

.study-nav-btn.profile:hover { border-color: rgba(255,159,202,0.55); background: rgba(255,159,202,0.12); color: #ffe2ef; }

.study-nav-btn.hide:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.10); }

.study-nav-btn.profile-trigger {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255,255,255,0.06);
        border-color: rgba(255,255,255,0.08);
        padding: 9px 13px 9px 10px;
    }

.study-nav-btn.profile-trigger:hover {
        color: white;
        background: rgba(255,255,255,0.075);
        border-color: rgba(255,255,255,0.13);
    }

.profile-dot {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-size: 11px;
        background: linear-gradient(135deg, rgba(117,227,168,0.95), rgba(125,181,255,0.95));
        color: #061018;
        font-weight: 900;
        overflow: hidden;
        line-height: 1;
    }

.profile-dot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.study-nav-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.study-nav-handle {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 79;
        display: none;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(18,22,32,0.78);
        color: var(--text);
        border-radius: 999px;
        padding: 9px 12px;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 14px 34px rgba(0,0,0,0.30);
    }

body.study-nav-hidden .study-nav-handle { display: inline-flex; }

body:not(.study-nav-hidden) .side-panel {
        top: 88px;
        max-height: calc(100vh - 178px);
    }

@media (max-width: 760px) {
        body:not(.study-nav-hidden) .side-panel {
            top: auto;
            max-height: none;
        }
    }

.profile-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

.profile-drawer {
        position: absolute;
        top: 16px;
        right: 16px;
        bottom: 16px;
        width: min(420px, calc(100vw - 32px));
        padding: 22px;
        border-radius: 32px;
        background:
            radial-gradient(circle at 88% 10%, rgba(125,181,255,0.18), transparent 30%),
            linear-gradient(180deg, rgba(19,24,39,0.96), rgba(7,9,18,0.98));
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 30px 90px rgba(0,0,0,0.52);
        transform: translateX(calc(100% + 24px));
        transition: transform 0.22s ease;
        overflow-y: auto;
    }

.profile-overlay.open .profile-drawer { transform: translateX(0); }

.profile-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 22px;
    }

.profile-kicker {
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

.profile-title { font-size: 24px; line-height: 1; font-weight: 900; letter-spacing: -0.04em; }

.profile-close {
        appearance: none;
        width: 42px;
        height: 42px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.09);
        background: rgba(255,255,255,0.05);
        color: white;
        cursor: pointer;
        font-size: 22px;
    }

.profile-card {
        border-radius: 26px;
        padding: 18px;
        background: rgba(255,255,255,0.055);
        border: 1px solid rgba(255,255,255,0.085);
        display: grid;
        gap: 14px;
    }

.profile-user {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

.profile-avatar {
        width: 66px;
        height: 66px;
        border-radius: 22px;
        object-fit: cover;
        display: none;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.10);
    }

.profile-name {
        font-size: 19px;
        font-weight: 900;
        letter-spacing: -0.03em;
        margin-bottom: 5px;
        overflow-wrap: anywhere;
    }

.profile-email {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

.profile-status {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
    }

.profile-actions {
        display: grid;
        gap: 10px;
    }

.profile-action {
        appearance: none;
        width: 100%;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.055);
        color: var(--text);
        border-radius: 16px;
        padding: 12px 14px;
        cursor: pointer;
        font: inherit;
        font-weight: 900;
    }

.profile-action.primary {
        background: linear-gradient(135deg, rgba(125,181,255,0.28), rgba(181,150,255,0.20));
        border-color: rgba(125,181,255,0.26);
    }

@media (max-width: 920px) {
        .study-nav {
            border-radius: 24px;
            align-items: flex-start;
            flex-direction: column;
        }
        .study-links { justify-content: flex-start; }
    
    .study-nav-btn.profile-trigger {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255,255,255,0.06);
        border-color: rgba(255,255,255,0.08);
        padding: 9px 13px 9px 10px;
    }

    .study-nav-btn.profile-trigger:hover {
        color: white;
        background: rgba(255,255,255,0.075);
        border-color: rgba(255,255,255,0.13);
    }

    .profile-dot {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-size: 11px;
        background: linear-gradient(135deg, rgba(117,227,168,0.95), rgba(125,181,255,0.95));
        color: #061018;
        font-weight: 900;
        overflow: hidden;
        line-height: 1;
    }

    .profile-dot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .study-nav-actions { width: 100%; justify-content: space-between; }
    }

@media (max-width: 640px) {
        .study-brand-text { display: none; }
        .study-link,
        .study-nav-btn { padding: 8px 10px; font-size: 12px; }
    }

body.study-nav-hidden .app-shell {
        min-height: 100vh;
    }

@media (max-width: 1180px) and (min-width: 761px) {
  body { padding: 18px !important; }
  .main { width: min(520px, calc(100vw - 32px)) !important; padding: 22px 28px 132px !important; }
  .hiragana, .prompt { font-size: 116px !important; }
  .hiragana-wrap, .prompt-wrap { min-height: 142px !important; }
  .side-panel { top: 98px !important; width: 218px !important; }
  .bottom-shell .drawer-content { max-height: 46vh !important; }
}

@media (max-width: 760px) {
  body {
    display: block !important;
    padding: 10px !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
  }
  .app-shell { display: block !important; min-height: auto !important; }
  .main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 94px !important;
    border-radius: 26px !important;
    padding: 20px 14px 130px !important;
    min-height: calc(100svh - 230px) !important;
  }
  .main h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .subline { font-size: 1rem !important; margin-bottom: 14px !important; }
  .scoreline { gap: 8px !important; margin-bottom: 12px !important; }
  .score-pill { padding: 8px 11px !important; font-size: 0.95rem !important; }
  .hiragana-wrap, .prompt-wrap { min-height: 132px !important; margin-bottom: 8px !important; }
  .hiragana, .prompt { font-size: clamp(5rem, 28vw, 7rem) !important; }
  .prompt-small { font-size: clamp(3.8rem, 20vw, 5rem) !important; }
  .hint, .combo-tier-notice { font-size: 0.9rem !important; min-height: 20px !important; }
  input[type="text"] { width: min(100%, 320px) !important; font-size: 20px !important; padding: 10px 12px !important; }
  .trial-config { margin-top: 8px !important; gap: 8px !important; }
  .choice-grid { width: 100% !important; gap: 8px !important; }
  .choice-btn { min-height: 58px !important; font-size: 30px !important; padding: 12px 6px !important; border-radius: 12px !important; }
  .choice-btn.choice-combo { font-size: 24px !important; }
  .left-panel, .right-panel {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    margin: 10px auto !important;
  }
  .panel-content { max-height: 260px !important; }
  .bottom-shell { z-index: 75 !important; }
  .tab-button { padding: 12px 10px !important; font-size: 1rem !important; }
  .drawer-content { height: auto !important; min-height: 0 !important; max-height: min(62vh, 460px) !important; padding: 12px !important; }
  .button-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .rows-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .toggle-btn, .btn { padding: 10px 10px !important; font-size: 0.95rem !important; }
}

body[data-display-mode="mobile"] .main {
  width: 100% !important;
  max-width: none !important;
  padding: 20px 14px 130px !important;
}

@media (max-width: 760px) {
  body {
    padding-top: 10px !important;
    background-color: #05060b !important;
  }
  .study-nav {
    position: relative !important;
    top: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px !important;
    margin: 0 0 10px !important;
    border-radius: 26px !important;
  }
  .study-brand { min-width: 0 !important; }
  .study-brand-text { display: none !important; }
  .study-mark { width: 52px !important; height: 52px !important; border-radius: 18px !important; font-size: 1.28rem !important; }
  .study-links {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch;
  }
  .study-links::-webkit-scrollbar { display: none !important; }
  .study-link { flex: 0 0 auto !important; padding: 10px 13px !important; font-size: 0.95rem !important; }
  .study-nav-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
  }
  .study-nav-btn.profile-trigger {
    width: auto !important;
    padding: 8px !important;
    border-radius: 999px !important;
  }
  .study-nav-btn.profile-trigger > span:not(.profile-dot) { display: none !important; }
  .study-nav-btn.hide {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    font-size: 0.82rem !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
  body.study-nav-hidden .study-nav { display: none !important; }
  body.study-nav-hidden .study-nav-handle {
    display: inline-flex !important;
    top: 10px !important;
    right: 10px !important;
  }
  .app-shell { align-items: flex-start !important; }
  .main { margin-top: 0 !important; }
}

@media (min-width: 761px) {
  .study-nav { margin-bottom: 14px !important; }
}

.bottom-shell.ma-modifiers-only{background:linear-gradient(180deg,rgba(11,14,20,.96),rgba(5,6,10,.98));border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -18px 50px rgba(0,0,0,.38)}

.bottom-shell.ma-modifiers-only .tab-row{grid-template-columns:1fr;width:min(520px,100%);margin:0 auto}

.bottom-shell.ma-modifiers-only .tab-button{border-right:0;min-height:54px;font-size:18px;letter-spacing:-.01em;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}

.bottom-shell.ma-modifiers-only .drawer-content{background:radial-gradient(circle at top left,rgba(255,255,255,.055),transparent 36%),linear-gradient(180deg,rgba(16,20,28,.98),rgba(9,10,14,.98));border-top:1px solid rgba(255,255,255,.07);min-height:auto;max-height:min(58vh,560px);padding:18px}

.bottom-shell.ma-modifiers-only .options-stack{gap:16px;width:min(1080px,100%)}

.bottom-shell.ma-modifiers-only .options-stack>div{padding:14px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075)}

.bottom-shell.ma-modifiers-only .section-title{margin:0 0 12px;text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:900}

.bottom-shell.ma-modifiers-only .button-grid,.bottom-shell.ma-modifiers-only .rows-grid{gap:8px}

.bottom-shell.ma-modifiers-only .toggle-btn{min-height:44px;border-radius:14px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.09);font-weight:850}

.bottom-shell.ma-modifiers-only .toggle-btn.active{transform:translateY(-1px)}

@media(max-width:760px){
  .bottom-shell.ma-modifiers-only .drawer-content{max-height:62vh;padding:12px}
  .bottom-shell.ma-modifiers-only .options-stack>div{padding:12px;border-radius:16px}
  .bottom-shell.ma-modifiers-only .button-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bottom-shell.ma-modifiers-only .rows-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .bottom-shell.ma-modifiers-only .toggle-btn{font-size:14px;padding:10px 8px}
}

.bottom-shell.ma-modifiers-only{z-index:9999 !important; pointer-events:auto !important;}

.bottom-shell.ma-modifiers-only .tab-button{cursor:pointer !important; user-select:none !important;}

.bottom-shell.ma-modifiers-only .drawer-content{display:none;}

.bottom-shell.ma-modifiers-only .drawer-content.open{display:block !important;}

.bottom-shell.ma-modifiers-only .toggle-btn,
.bottom-shell.ma-modifiers-only .btn {
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--text,#f3f3f3) !important;
  box-shadow: none !important;
}

.bottom-shell.ma-modifiers-only .toggle-btn:hover,
.bottom-shell.ma-modifiers-only .btn:hover {
  transform: translateY(-1px) !important;
  background: rgba(var(--ma-active-rgb, 103,215,139), .12) !important;
  border-color: rgba(var(--ma-active-rgb, 103,215,139), .46) !important;
  box-shadow: 0 0 0 1px rgba(var(--ma-active-rgb, 103,215,139), .18), 0 10px 22px rgba(0,0,0,.18) !important;
}

.bottom-shell.ma-modifiers-only .toggle-btn.active,
.bottom-shell.ma-modifiers-only .toggle-btn[aria-pressed="true"],
.bottom-shell.ma-modifiers-only .btn.active,
.bottom-shell.ma-modifiers-only .btn[aria-pressed="true"] {
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, rgba(var(--ma-active-rgb, 103,215,139), .30), rgba(var(--ma-active-rgb, 103,215,139), .14)) !important;
  border-color: rgba(var(--ma-active-rgb, 103,215,139), .78) !important;
  color: var(--ma-active-text, #d9ffe7) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--ma-active-rgb, 103,215,139), .28), 0 0 0 1px rgba(var(--ma-active-rgb, 103,215,139), .16), 0 12px 26px rgba(var(--ma-active-rgb, 103,215,139), .12) !important;
}

.bottom-shell.ma-modifiers-only .toggle-btn.disabled,
.bottom-shell.ma-modifiers-only .btn:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.main { width: min(680px, calc(100vw - 32px)) !important; }

.scoreline {
  display: grid !important;
  grid-template-columns: repeat(4, max-content) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 44px !important;
}

.score-pill {
  min-width: 118px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.score-pill:nth-child(2) { min-width: 174px !important; }

#endlessWrongPill, #dailyProgressPill, #testQuestionPill { min-width: 150px !important; }

@media (max-width: 760px) {
  .main { width: 100% !important; }
  .scoreline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .score-pill, .score-pill:nth-child(2), #endlessWrongPill, #dailyProgressPill, #testQuestionPill {
    min-width: 0 !important;
    width: 100% !important;
  }
}