:root {
    --navy:#071b2b;
    --navy-soft:#0b2d43;
    --navy-light:#124764;

    --cyan:#21bbc8;
    --cyan-soft:#daf5f6;

    --blue:#126c91;

    --bg:#f3f7f9;
    --white:#ffffff;

    --text:#163142;
    --muted:#718794;

    --border:#dce7ec;

    --green:#1fa77a;
    --orange:#e2a13c;
    --red:#d85858;

    --shadow:
        0 14px 45px rgba(16,55,75,.08);
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:var(--bg);
    color:var(--text);
}

a {
    color:inherit;
}


/* SIDEBAR */

.sidebar {
    position:fixed;
    inset:0 auto 0 0;

    width:245px;

    padding:
        32px 24px;

    color:white;

    background:
        radial-gradient(
            circle at 30% 10%,
            #11435e,
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #061725,
            #092b40
        );
}

.logo-block {
    padding-bottom:30px;
}

.brand {
    font-size:27px;
    font-weight:850;
    letter-spacing:1.4px;
}

.brand span {
    color:var(--cyan);
}

.subtitle {
    margin-top:5px;

    font-size:10px;
    font-weight:700;

    letter-spacing:3.6px;

    color:#8dc9d2;
}

.nav {
    display:flex;
    flex-direction:column;
    gap:6px;

    margin-top:18px;
}

.nav a {
    display:flex;
    align-items:center;
    gap:14px;

    padding:
        13px 14px;

    border-radius:12px;

    text-decoration:none;

    color:#cfe1e9;

    transition:.2s ease;
}

.nav a:hover {
    color:white;

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

    transform:
        translateX(2px);
}

.sidebar-bottom {
    position:absolute;
    left:24px;
    right:24px;
    bottom:28px;

    display:flex;
    flex-direction:column;
    gap:11px;

    color:#91acba;
}

.sidebar-bottom small {
    line-height:1.45;
}

.beta-pill {
    width:max-content;

    padding:
        5px 9px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:999px;

    font-size:9px;
    letter-spacing:2px;
}


/* MAIN */

.main {
    margin-left:245px;

    padding:
        38px 46px 70px;

    max-width:1500px;
}

.topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:25px;
}

.topbar h1 {
    margin:
        4px 0;

    font-size:30px;
}

.topbar p {
    margin:0;

    color:var(--muted);
}

.top-eyebrow {
    color:var(--cyan);

    font-size:11px;
    font-weight:750;

    letter-spacing:2px;
}

.top-actions {
    display:flex;
    align-items:center;
    gap:9px;

    padding:
        8px 12px;

    border:
        1px solid var(--border);

    border-radius:999px;

    background:white;

    color:var(--muted);

    font-size:12px;
}

.online-dot {
    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--green);
}


/* HERO */

.hero {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;

    min-height:320px;

    padding:
        44px 50px;

    border-radius:27px;

    overflow:hidden;

    color:white;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(33,187,200,.25),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #071b2b,
            #0c425d
        );

    box-shadow:var(--shadow);
}

.hero-copy {
    max-width:650px;
}

.hero-kicker {
    color:#7de2e8;

    font-size:11px;
    font-weight:800;

    letter-spacing:2px;
}

.hero h2 {
    margin:
        12px 0 14px;

    font-size:
        clamp(34px,4vw,53px);

    line-height:1.03;
}

.hero p {
    max-width:600px;

    color:#c7dce5;

    line-height:1.65;
}

.hero-buttons {
    display:flex;
    gap:11px;

    margin-top:28px;
}

.btn {
    display:inline-block;

    padding:
        13px 18px;

    border-radius:11px;

    text-decoration:none;

    font-size:14px;
    font-weight:750;
}

.btn.primary {
    background:var(--cyan);
    color:#052632;
}

.btn.ghost {
    border:
        1px solid rgba(255,255,255,.24);

    color:white;
}

.hero-progress {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;

    color:#c9dce4;
}

.circle {
    display:grid;
    place-items:center;

    width:170px;
    height:170px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #0b3248 57%,
            transparent 59%
        ),
        conic-gradient(
            var(--cyan) 0 68%,
            rgba(255,255,255,.10) 68% 100%
        );
}

.circle div {
    text-align:center;
}

.circle strong {
    display:block;

    color:white;

    font-size:35px;
}

.circle span {
    font-size:11px;
}


/* STATS */

.stats {
    display:grid;
    grid-template-columns:
        repeat(4,1fr);

    gap:16px;

    margin:
        22px 0 42px;
}

.stat-card {
    display:flex;
    align-items:center;
    gap:15px;

    padding:20px;

    border:
        1px solid var(--border);

    border-radius:17px;

    background:white;

    box-shadow:
        0 8px 28px rgba(16,55,75,.04);
}

.stat-card strong,
.stat-card span {
    display:block;
}

.stat-card strong {
    font-size:27px;
}

.stat-card div span {
    margin-top:3px;

    color:var(--muted);

    font-size:12px;
}

.stat-icon {
    display:grid;
    place-items:center;

    width:44px;
    height:44px;

    border-radius:12px;

    font-weight:800;
}

.stat-icon.cyan {
    background:#def6f7;
    color:#158d98;
}

.stat-icon.green {
    background:#e0f4ed;
    color:#17805d;
}

.stat-icon.amber {
    background:#fff0d8;
    color:#a06914;
}

.stat-icon.blue {
    background:#e1eef5;
    color:#296b8b;
}


/* SECTIONS */

.section {
    margin-top:42px;
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    margin-bottom:18px;
}

.section-heading h2 {
    margin:
        0 0 6px;

    font-size:24px;
}

.section-heading p {
    margin:0;

    color:var(--muted);
}

.section-heading a {
    color:var(--blue);

    text-decoration:none;

    font-size:13px;
}


/* CATEGORIES */

.category-grid {
    display:grid;
    grid-template-columns:
        repeat(2,1fr);

    gap:16px;
}

.category-card {
    overflow:hidden;

    border:
        1px solid var(--border);

    border-radius:20px;

    background:white;

    text-decoration:none;

    box-shadow:
        0 8px 28px rgba(16,55,75,.04);

    transition:.2s ease;
}

.category-card:hover {
    transform:
        translateY(-3px);

    box-shadow:var(--shadow);
}

.category-cover {
    display:flex;
    align-items:center;
    gap:17px;

    min-height:115px;

    padding:22px;

    background:
        linear-gradient(
            120deg,
            #0c344b,
            #12677c
        );

    color:white;
}

.category-badge {
    display:grid;
    place-items:center;

    width:52px;
    height:52px;

    border-radius:15px;

    background:
        rgba(255,255,255,.12);
}

.category-title strong,
.category-title span {
    display:block;
}

.category-title strong {
    font-size:16px;
}

.category-title span {
    margin-top:5px;

    color:#bcd9e3;

    font-size:12px;
}

.category-footer {
    display:flex;
    align-items:center;

    gap:15px;

    padding:
        16px 19px;
}

.mini-progress {
    flex:1;

    height:5px;

    overflow:hidden;

    border-radius:999px;

    background:#e6eef2;
}

.mini-progress span {
    display:block;

    height:100%;

    background:var(--cyan);
}

.open-arrow {
    color:var(--blue);
}


/* MODES */

.mode-grid {
    display:grid;
    grid-template-columns:
        repeat(4,1fr);

    gap:15px;
}

.mode-card {
    min-height:190px;

    padding:22px;

    border:
        1px solid var(--border);

    border-radius:18px;

    background:white;

    text-decoration:none;

    transition:.2s ease;
}

.mode-card:hover:not(.disabled) {
    transform:
        translateY(-3px);

    box-shadow:var(--shadow);
}

.mode-icon {
    display:block;

    margin-bottom:23px;

    font-size:28px;
}

.mode-card strong {
    display:block;

    font-size:15px;
}

.mode-card p {
    color:var(--muted);

    font-size:12px;
    line-height:1.55;
}

.disabled {
    opacity:.52;
}


/* STUDY */

.study-top {
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:22px;
}

.back-link {
    color:var(--blue);

    text-decoration:none;
}

.session-pill {
    padding:
        7px 10px;

    border-radius:999px;

    background:#dff5f7;

    color:#147b85;

    font-size:10px;
    font-weight:800;

    letter-spacing:1.2px;
}

.study-layout {
    display:grid;
    grid-template-columns:
        minmax(0,1.25fr)
        minmax(360px,.75fr);

    gap:20px;

    align-items:start;
}

.question-panel,
.answer-panel {
    border:
        1px solid var(--border);

    border-radius:23px;

    background:white;

    box-shadow:var(--shadow);
}

.question-panel {
    min-height:680px;

    padding:
        35px;
}

.question-meta {
    display:flex;
    justify-content:space-between;

    padding-bottom:18px;

    color:var(--muted);

    font-size:10px;
    font-weight:800;

    letter-spacing:1.5px;

    border-bottom:
        1px solid var(--border);
}

.question-body {
    display:flex;
    flex-direction:column;
    justify-content:center;

    min-height:480px;

    padding:
        30px 5px;

    font-size:21px;
    line-height:1.55;
}

.question-body img,
.answer-body img {
    display:block;

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

    margin:
        20px auto;

    border-radius:14px;
}

.reveal-button {
    width:100%;

    padding:15px;

    border:0;
    border-radius:12px;

    background:var(--navy);

    color:white;

    font-weight:750;

    cursor:pointer;
}

.answer-panel {
    display:none;

    padding:
        27px;
}

.answer-panel.visible {
    display:block;
}

.answer-tabs {
    display:flex;
    gap:22px;

    padding-bottom:15px;

    border-bottom:
        1px solid var(--border);

    color:var(--muted);

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;
}

.answer-tabs .active {
    color:var(--cyan);
}

.answer-section {
    padding:
        23px 0;
}

.answer-caption {
    color:var(--green);

    font-size:10px;
    font-weight:800;

    letter-spacing:1.5px;
}

.answer-body {
    margin-top:12px;

    font-size:17px;
    line-height:1.55;
}

.explanation-card,
.remember-card,
.sources-box {
    margin-top:16px;

    padding:18px;

    border-radius:14px;
}

.explanation-card {
    background:#eff7f9;
}

.explanation-title {
    display:block;

    margin-bottom:10px;

    font-weight:750;
}

.remember-card {
    border:
        1px solid #eed8a8;

    background:#fff9ec;
}

.remember-card span {
    color:#9c6915;

    font-size:10px;
    font-weight:850;

    letter-spacing:1.2px;
}

.sources-box {
    border:
        1px solid var(--border);

    background:#fafcfd;
}

.sources-box h3 {
    margin:
        0 0 12px;

    font-size:14px;
}

.source-mini {
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:
        11px 0;

    border-top:
        1px solid var(--border);

    text-decoration:none;
}

.source-mini strong,
.source-mini span {
    display:block;
}

.source-mini div span {
    margin-top:3px;

    color:var(--muted);

    font-size:11px;
}

.rating form {
    display:grid;
    grid-template-columns:
        repeat(4,1fr);

    gap:7px;

    margin-top:22px;
}

.rating button {
    padding:
        11px 5px;

    border:0;
    border-radius:10px;

    cursor:pointer;

    font-size:11px;
    font-weight:700;
}

.rating button span {
    display:block;

    margin-bottom:4px;

    font-size:15px;
}

.rating-again {
    color:#9d3d3d;
    background:#fbe4e4;
}

.rating-hard {
    color:#98630e;
    background:#fff0d8;
}

.rating-good {
    color:#176f53;
    background:#e3f5ed;
}

.rating-easy {
    color:#17658b;
    background:#e2f1f8;
}


/* SOURCES */

.simple-header {
    max-width:780px;

    margin-bottom:30px;
}

.simple-header h1 {
    margin:
        7px 0 9px;

    font-size:37px;
}

.simple-header p {
    color:var(--muted);

    line-height:1.6;
}

.source-grid {
    display:grid;
    grid-template-columns:
        repeat(2,1fr);

    gap:17px;
}

.source-card {
    padding:25px;

    border:
        1px solid var(--border);

    border-radius:19px;

    background:white;

    text-decoration:none;

    box-shadow:
        0 8px 28px rgba(16,55,75,.04);
}

.source-top {
    display:flex;
    justify-content:space-between;

    color:var(--cyan);

    font-size:11px;
    font-weight:800;
}

.source-card h2 {
    margin:
        18px 0 8px;

    font-size:20px;
}

.source-card p {
    color:var(--muted);

    line-height:1.55;
}

.source-meta {
    display:flex;
    justify-content:space-between;

    margin-top:22px;

    color:#8799a4;

    font-size:10px;
}

.source-detail {
    max-width:950px;

    margin-top:24px;

    padding:35px;

    border:
        1px solid var(--border);

    border-radius:22px;

    background:white;

    box-shadow:var(--shadow);
}

.source-detail h1 {
    margin:
        8px 0 10px;

    font-size:34px;
}

.source-scope {
    color:var(--muted);
}

.source-detail-grid {
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:15px;

    margin:
        30px 0;
}

.source-detail-grid div {
    padding:16px;

    border-radius:13px;

    background:#f4f8fa;
}

.source-detail-grid span,
.source-detail-grid strong {
    display:block;
}

.source-detail-grid span {
    color:var(--muted);

    font-size:10px;
}

.source-detail-grid strong {
    margin-top:5px;
}

.legal-box {
    margin:
        25px 0;

    padding:20px;

    border-left:
        4px solid var(--orange);

    border-radius:10px;

    background:#fff8ec;
}

.legal-box p {
    margin-bottom:0;

    line-height:1.6;
}

.linked-section {
    margin-top:38px;
}

.linked-question {
    padding:
        15px 0;

    border-top:
        1px solid var(--border);
}


/* THEORY */

.theory-grid {
    display:grid;
    grid-template-columns:
        repeat(2,1fr);

    gap:15px;
}

.theory-card {
    padding:22px;

    border:
        1px solid var(--border);

    border-radius:17px;

    background:white;

    text-decoration:none;
}

.theory-card > span {
    color:var(--cyan);

    font-size:9px;
    font-weight:800;

    letter-spacing:1px;
}

.theory-card p {
    color:var(--muted);
}

.empty-state {
    padding:
        60px 30px;

    border:
        1px solid var(--border);

    border-radius:22px;

    text-align:center;

    background:white;
}

.empty-icon {
    font-size:46px;
}


/* MOBILE */

@media(max-width:1050px) {

    .study-layout {
        grid-template-columns:1fr;
    }

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

@media(max-width:820px) {

    .sidebar {
        position:relative;

        width:100%;
        height:auto;

        padding:20px;
    }

    .nav {
        flex-direction:row;
        flex-wrap:wrap;
    }

    .nav a {
        padding:9px 11px;
    }

    .sidebar-bottom {
        display:none;
    }

    .main {
        margin-left:0;

        padding:
            22px 17px 50px;
    }

    .topbar {
        align-items:flex-start;
        gap:15px;
    }

    .top-actions {
        display:none;
    }

    .hero {
        padding:30px 24px;
    }

    .hero-progress {
        display:none;
    }

    .hero-buttons {
        flex-direction:column;
        align-items:flex-start;
    }

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

    .category-grid,
    .source-grid,
    .theory-grid {
        grid-template-columns:1fr;
    }

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

    .question-panel {
        min-height:auto;

        padding:22px;
    }

    .question-body {
        min-height:360px;

        font-size:18px;
    }

    .rating form {
        grid-template-columns:
            1fr 1fr;
    }

    .source-detail-grid {
        grid-template-columns:1fr;
    }
}


/* ============================================================
   SAILOFF ACADEMY — STUDY V3
   ============================================================ */

.study-v3 {
    min-height:calc(100vh - 1px);

    margin:
        -38px -46px -70px;

    padding:
        30px 42px 65px;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(35,187,200,.18),
            transparent 26%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(17,91,126,.22),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #061521 0%,
            #081f30 45%,
            #0a2d42 100%
        );

    color:white;
}


.study-v3-top {
    display:flex;
    justify-content:space-between;
    align-items:center;

    max-width:1320px;

    margin:
        0 auto 25px;
}


.study-v3-back {
    display:flex;
    align-items:center;
    gap:8px;

    color:#b8d0dc;

    text-decoration:none;

    font-size:13px;

    transition:.2s;
}


.study-v3-back:hover {
    color:white;
}


.study-v3-context {
    display:flex;
    align-items:center;
    gap:8px;

    padding:
        8px 12px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius:999px;

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

    color:#8ddde4;

    font-size:9px;
    font-weight:800;

    letter-spacing:1.5px;

    backdrop-filter:
        blur(10px);
}


.study-v3-live {
    width:7px;
    height:7px;

    border-radius:50%;

    background:#28c4a1;

    box-shadow:
        0 0 12px rgba(40,196,161,.7);
}


.study-v3-layout {
    display:grid;
    grid-template-columns:
        minmax(0,1fr);

    gap:22px;

    max-width:1320px;

    margin:auto;

    transition:
        grid-template-columns .35s ease;
}


.study-v3-layout.revealed {
    grid-template-columns:
        minmax(0,1.35fr)
        minmax(340px,.65fr);
}


.study-v3-question {
    overflow:hidden;

    min-height:760px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:27px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 28px 80px rgba(0,0,0,.27);

    backdrop-filter:
        blur(14px);
}


.study-v3-question-head {
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:
        24px 30px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.study-v3-question-head > div {
    display:flex;
    align-items:center;
    gap:12px;
}


.study-v3-question-head strong {
    color:#a8c3cf;

    font-size:11px;
}


.study-v3-eyebrow {
    color:#4ed5df;

    font-size:9px;
    font-weight:850;

    letter-spacing:2px;
}


.study-v3-original {
    padding:
        6px 10px;

    border-radius:999px;

    background:
        rgba(33,187,200,.10);

    color:#89dce2;

    font-size:9px;
    font-weight:700;

    letter-spacing:.5px;
}


.study-v3-content {
    display:flex;
    flex-direction:column;
    justify-content:center;

    min-height:580px;

    padding:
        35px 45px;
}


.study-v3-content.media-first {
    padding:
        30px;
}


.study-v3-text {
    max-width:820px;

    margin:
        0 auto 30px;

    color:#f2f7fa;

    font-size:
        clamp(20px,2vw,28px);

    line-height:1.55;

    text-align:center;
}


.study-v3-media {
    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;

    margin:auto;
}


.study-v3-media-inner {
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    min-height:420px;

    padding:
        22px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:20px;

    background:
        rgba(4,19,29,.52);
}


.study-v3-media img {
    display:block;

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

    width:auto;
    height:auto;

    margin:auto;

    border-radius:12px;

    object-fit:contain;

    box-shadow:
        0 16px 40px rgba(0,0,0,.24);
}


.study-v3-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:25px;

    padding:
        24px 30px;

    border-top:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(3,17,27,.24);
}


.study-v3-hint {
    display:flex;
    align-items:center;
    gap:12px;

    color:#9eb8c5;
}


.study-v3-hint > span {
    display:grid;
    place-items:center;

    width:38px;
    height:38px;

    border-radius:11px;

    background:
        rgba(33,187,200,.10);
}


.study-v3-hint strong,
.study-v3-hint small {
    display:block;
}


.study-v3-hint strong {
    color:#d6e5eb;

    font-size:11px;
}


.study-v3-hint small {
    margin-top:3px;

    font-size:10px;
}


.study-v3-reveal {
    display:flex;
    align-items:center;
    justify-content:space-between;

    min-width:250px;

    padding:
        14px 18px;

    border:0;

    border-radius:12px;

    background:
        linear-gradient(
            90deg,
            #1bb3c2,
            #30cad1
        );

    color:#04232e;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 10px 28px rgba(32,191,201,.20);

    transition:.2s ease;
}


.study-v3-reveal:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 15px 34px rgba(32,191,201,.28);
}


/* CORRECTION PANEL */

.study-v3-answer {
    display:none;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:27px;

    background:
        rgba(7,28,43,.94);

    box-shadow:
        0 28px 80px rgba(0,0,0,.29);

    opacity:0;

    transform:
        translateX(25px);

    transition:
        opacity .35s ease,
        transform .35s ease;

    backdrop-filter:
        blur(18px);
}


.study-v3-answer.visible {
    display:block;

    opacity:1;

    transform:none;
}


.study-v3-answer-head {
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:
        22px 24px;

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

    color:#8ddbe1;

    font-size:9px;
    font-weight:850;

    letter-spacing:1.7px;
}


.study-v3-correct-dot {
    display:grid;
    place-items:center;

    width:31px;
    height:31px;

    border-radius:50%;

    background:
        rgba(31,167,122,.15);

    color:#3ad5a2;
}


.study-v3-answer-main {
    padding:
        28px 24px;
}


.study-v3-answer-label {
    color:#3bd3a1;

    font-size:9px;
    font-weight:850;

    letter-spacing:1.4px;
}


.study-v3-answer-value {
    margin-top:10px;

    color:white;

    font-size:
        clamp(28px,3vw,40px);

    font-weight:750;

    line-height:1.25;
}


.study-v3-answer-value img {
    max-width:100%;

    border-radius:12px;
}


.study-v3-explanation,
.study-v3-remember,
.study-v3-sources,
.study-v3-source-pending {
    margin:
        0 18px 16px;

    padding:
        18px;

    border-radius:15px;
}


.study-v3-explanation {
    background:
        rgba(255,255,255,.055);

    color:#cbdce4;

    line-height:1.55;
}


.study-v3-block-title {
    margin-bottom:9px;

    color:white;

    font-size:12px;
    font-weight:800;
}


.study-v3-remember {
    border:
        1px solid rgba(224,164,61,.25);

    background:
        rgba(224,164,61,.08);
}


.study-v3-remember > span {
    color:#e9b55d;

    font-size:9px;
    font-weight:850;

    letter-spacing:1px;
}


.study-v3-remember p {
    margin-bottom:0;

    color:#e7dcc8;

    font-size:12px;

    line-height:1.55;
}


.study-v3-sources {
    border:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.035);
}


.study-v3-source {
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:12px;

    padding:
        12px 0;

    border-top:
        1px solid rgba(255,255,255,.07);

    text-decoration:none;

    color:white;
}


.study-v3-source strong,
.study-v3-source span {
    display:block;
}


.study-v3-source div span {
    margin-top:3px;

    color:#829eac;

    font-size:9px;
}


.study-v3-source-pending {
    display:flex;
    align-items:center;
    gap:13px;

    border:
        1px solid rgba(255,255,255,.07);

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

    color:#8da8b5;
}


.study-v3-source-pending > span {
    font-size:20px;
}


.study-v3-source-pending strong,
.study-v3-source-pending small {
    display:block;
}


.study-v3-source-pending strong {
    color:#bdd0d9;

    font-size:11px;
}


.study-v3-source-pending small {
    margin-top:4px;

    font-size:9px;

    line-height:1.4;
}


.study-v3-rating-title {
    margin:
        24px 24px 10px;

    color:#839da9;

    font-size:10px;
}


.study-v3-rating {
    display:grid;
    grid-template-columns:
        repeat(4,1fr);

    gap:7px;

    padding:
        0 18px 22px;
}


.study-v3-rating button {
    min-height:67px;

    padding:
        10px 4px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:11px;

    cursor:pointer;

    transition:.18s;
}


.study-v3-rating button:hover {
    transform:
        translateY(-2px);
}


.study-v3-rating span,
.study-v3-rating small {
    display:block;
}


.study-v3-rating span {
    margin-bottom:5px;

    font-size:18px;
}


.study-v3-rating small {
    font-size:9px;
    font-weight:750;
}


.v3-again {
    color:#f07a78;

    background:
        rgba(216,88,88,.10);
}


.v3-hard {
    color:#eab552;

    background:
        rgba(226,161,60,.10);
}


.v3-good {
    color:#48d6a7;

    background:
        rgba(31,167,122,.11);
}


.v3-easy {
    color:#58c6dc;

    background:
        rgba(33,187,200,.11);
}


/* TABLETTE */

@media(max-width:1050px) {

    .study-v3-layout.revealed {
        grid-template-columns:1fr;
    }

    .study-v3-question {
        min-height:auto;
    }

    .study-v3-answer {
        transform:
            translateY(20px);
    }

}


/* MOBILE */

@media(max-width:820px) {

    .study-v3 {
        margin:
            -22px -17px -50px;

        padding:
            20px 14px 45px;
    }

    .study-v3-question {
        border-radius:20px;
    }

    .study-v3-question-head {
        padding:
            18px;
    }

    .study-v3-content,
    .study-v3-content.media-first {
        min-height:auto;

        padding:
            20px 15px;
    }

    .study-v3-media-inner {
        min-height:320px;

        padding:10px;
    }

    .study-v3-media img {
        max-height:430px;
    }

    .study-v3-bottom {
        flex-direction:column;
        align-items:stretch;

        padding:
            18px;
    }

    .study-v3-reveal {
        width:100%;
    }

    .study-v3-answer {
        border-radius:20px;
    }

    .study-v3-rating {
        grid-template-columns:
            1fr 1fr;
    }

}