/* =========================================================
   IDENTITY SECURITY FOR HUMANS — MODERN LESSON SYSTEM
   Load AFTER styles.css
   ========================================================= */

.lesson-screen {
    min-height: 100vh;
    position: relative;
    isolation: isolate;

    background:
        radial-gradient(circle at 82% 10%, rgba(113, 231, 255, 0.075), transparent 27rem),
        radial-gradient(circle at 7% 88%, rgba(255, 135, 61, 0.05), transparent 26rem),
        linear-gradient(180deg, #05070b 0%, #070a11 52%, #05070b 100%);
}

.lesson-screen::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);

    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
}

.lesson-shell {
    width: min(calc(100% - 48px), 1050px);
    min-height: 100vh;
    margin: auto;

    display: flex;
    flex-direction: column;
}

.lesson-topbar {
    min-height: 88px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

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

.lesson-close {
    color: var(--muted);
    font-size: .76rem;
    transition: color 150ms ease;
}

.lesson-close:hover {
    color: var(--text);
}

.lesson-progress-wrap {
    padding: 20px 0 0;
}

.lesson-progress-meta {
    margin-bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    color: var(--dim);
    font-size: .64rem;
    font-weight: 650;
    letter-spacing: .14em;
}

.lesson-progress {
    width: 100%;
    height: 2px;
    overflow: hidden;

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

.lesson-progress > span {
    display: block;
    height: 100%;
    width: var(--progress);

    background:
        linear-gradient(90deg, var(--cyan), var(--blue) 62%, var(--orange));

    box-shadow:
        0 0 16px rgba(113,231,255,.24);
}

/* class-based progress: no inline styles needed */
.progress-12 { --progress: 12%; }
.progress-14 { --progress: 14%; }
.progress-25 { --progress: 25%; }
.progress-28 { --progress: 28%; }
.progress-38 { --progress: 38%; }
.progress-42 { --progress: 42%; }
.progress-50 { --progress: 50%; }
.progress-57 { --progress: 57%; }
.progress-62 { --progress: 62%; }
.progress-71 { --progress: 71%; }
.progress-75 { --progress: 75%; }
.progress-86 { --progress: 86%; }
.progress-88 { --progress: 88%; }
.progress-100 { --progress: 100%; }

.lesson-stage {
    flex: 1;
    padding: 68px 0 72px;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;

    animation: stageIn .52s cubic-bezier(.2,.75,.25,1) both;
}

.lesson-stage.split {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .76fr);
    gap: 74px;
}

.lesson-copy {
    max-width: 800px;
}

.lesson-kicker {
    margin: 0 0 18px;

    color: var(--cyan);
    font-size: .65rem;
    font-weight: 760;
    letter-spacing: .19em;
}

.lesson-kicker.orange {
    color: var(--orange);
}

.lesson-copy h1 {
    max-width: 920px;
    margin: 0;

    font-size: clamp(3.25rem, 7vw, 6.3rem);
    font-weight: 600;
    line-height: .93;
    letter-spacing: -.058em;
}

.lesson-copy h1 .muted-line {
    display: block;
    color: var(--muted);
}

.lesson-copy h1 .accent-line {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            100deg,
            var(--cyan),
            var(--blue) 46%,
            var(--violet) 72%,
            var(--orange-hot)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.lesson-copy h1 .orange-line {
    display: block;
    color: var(--orange-hot);

    text-shadow:
        0 0 28px rgba(255,135,61,.055);
}

.lesson-lead {
    max-width: 760px;
    margin: 34px 0 0;

    color: var(--muted);

    font-size: clamp(1.08rem, 1.7vw, 1.30rem);
    line-height: 1.66;
}

.lesson-body {
    max-width: 760px;
    margin: 27px 0 0;

    color: var(--muted);

    font-size: 1rem;
    line-height: 1.72;
}

.lesson-body strong,
.lesson-lead strong {
    color: var(--text);
    font-weight: 620;
}

.lesson-emphasis {
    max-width: 760px;
    margin: 34px 0 0;
    padding: 20px 22px;

    position: relative;

    border: 1px solid rgba(113,231,255,.09);
    border-left: 2px solid var(--cyan);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

    background:
        linear-gradient(90deg, rgba(113,231,255,.05), rgba(113,231,255,.012) 55%, transparent);

    color: var(--text);

    font-size: 1.08rem;
    line-height: 1.62;
}

.lesson-emphasis.orange {
    border-color: rgba(255,135,61,.10);
    border-left-color: var(--orange);

    background:
        linear-gradient(90deg, rgba(255,135,61,.055), rgba(255,135,61,.012) 55%, transparent);
}

.lesson-actions {
    margin-top: 38px;

    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lesson-button {
    min-height: 49px;
    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    border: 1px solid var(--cyan);
    border-radius: var(--radius-sm);

    background:
        linear-gradient(100deg, var(--cyan), #8cecff);

    color: #041014;

    font-size: .86rem;
    font-weight: 680;

    box-shadow:
        0 10px 34px rgba(113,231,255,.07);

    transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        background 170ms ease,
        border-color 170ms ease,
        color 170ms ease;
}

.lesson-button:hover {
    transform: translateY(-3px);
    background: var(--cyan-hot);
    box-shadow:
        0 17px 46px rgba(113,231,255,.11);
}

.lesson-button.secondary {
    border-color: var(--line-strong);
    background: rgba(255,255,255,.015);
    color: var(--muted);
    box-shadow: none;
}

.lesson-button.secondary:hover {
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.035);
    color: var(--text);
}

.lesson-button.orange {
    border-color: var(--orange);
    background:
        linear-gradient(100deg, var(--orange), var(--orange-hot));
    color: #170b04;

    box-shadow:
        0 10px 34px rgba(255,135,61,.07);
}

.lesson-button.orange:hover {
    background: var(--orange-hot);
    box-shadow:
        0 17px 46px rgba(255,135,61,.10);
}


/* =========================================================
   VISUAL PANEL
   ========================================================= */

.visual-panel {
    min-height: 400px;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: var(--radius-md);

    background:
        radial-gradient(circle at 72% 16%, rgba(113,231,255,.045), transparent 35%),
        linear-gradient(145deg, rgba(255,255,255,.031), rgba(255,255,255,.006));

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 28px 84px rgba(0,0,0,.22);
}

.visual-panel::before {
    content: "";
    position: absolute;

    width: 250px;
    height: 250px;

    top: -140px;
    right: -100px;
    z-index: -1;

    border-radius: 50%;
    background: rgba(113,231,255,.10);
    filter: blur(68px);
}

.visual-panel.orange::before {
    background: rgba(255,135,61,.105);
}

.visual-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(135deg, rgba(255,255,255,.018), transparent 26%),
        repeating-linear-gradient(90deg, transparent 0, transparent 51px, rgba(255,255,255,.012) 52px);

    pointer-events: none;
}

.visual-label {
    position: absolute;
    top: 20px;
    left: 22px;

    color: var(--dim);

    font-size: .58rem;
    font-weight: 680;
    letter-spacing: .17em;
}

.visual-center {
    position: absolute;
    inset: 0;

    padding: 45px;

    display: grid;
    place-items: center;
}


/* =========================================================
   PASSWORD VISUALS
   ========================================================= */

.password-chip {
    max-width: 320px;
    padding: 16px 19px;

    border: 1px solid rgba(113,231,255,.24);
    border-radius: var(--radius-sm);

    background:
        linear-gradient(135deg, rgba(113,231,255,.07), rgba(113,231,255,.015));

    color: var(--cyan-hot);

    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: clamp(1rem, 2vw, 1.22rem);
    letter-spacing: .01em;

    box-shadow:
        0 18px 60px rgba(0,0,0,.22);
}

.account-chain {
    width: 100%;
    margin-top: 18px;
    display: grid;
    gap: 9px;
}

.account-row {
    padding: 13px 15px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;

    border: 1px solid var(--line);
    border-radius: var(--radius-sm);

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

.account-row span:first-child {
    color: var(--text);
    font-size: .83rem;
}

.account-row span:last-child {
    color: var(--orange-hot);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .70rem;
}

.flow-path {
    width: 100%;
    display: grid;
    gap: 10px;
}

.flow-step {
    padding: 14px 16px;

    position: relative;

    border: 1px solid rgba(113,231,255,.07);
    border-left: 2px solid var(--cyan);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

    background:
        linear-gradient(90deg, rgba(113,231,255,.05), rgba(113,231,255,.012));

    color: var(--text);
    font-size: .86rem;
}

.flow-step::after {
    content: "↓";
    position: absolute;
    left: 12px;
    bottom: -16px;
    z-index: 2;

    color: var(--dim);
    font-size: .70rem;
}

.flow-step:last-child::after {
    display: none;
}

.flow-step.orange {
    border-color: rgba(255,135,61,.09);
    border-left-color: var(--orange);

    background:
        linear-gradient(90deg, rgba(255,135,61,.055), rgba(255,135,61,.012));
}


/* =========================================================
   VAULT VISUALS
   ========================================================= */

.vault-box {
    width: 220px;
    height: 240px;

    position: relative;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,135,61,.34);
    border-radius: 20px;

    background:
        radial-gradient(circle at 64% 18%, rgba(255,135,61,.12), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.026), rgba(255,255,255,.008));

    box-shadow:
        inset 0 0 0 11px rgba(255,255,255,.009),
        inset 0 1px 0 rgba(255,255,255,.035),
        0 26px 82px rgba(0,0,0,.24);
}

.vault-box::before {
    content: "";
    position: absolute;
    inset: 19px;

    border: 1px solid rgba(255,255,255,.05);
    border-radius: 13px;
}

.vault-door {
    width: 82px;
    height: 82px;

    position: relative;

    border: 2px solid var(--orange);
    border-radius: 50%;

    box-shadow:
        0 0 32px rgba(255,135,61,.09);
}

.vault-door::before,
.vault-door::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    background: var(--orange);

    transform: translate(-50%, -50%);
}

.vault-door::before {
    width: 38px;
    height: 2px;
}

.vault-door::after {
    width: 2px;
    height: 38px;
}

.chat-card {
    width: min(100%, 330px);
    padding: 18px;

    border: 1px solid var(--line);
    border-radius: var(--radius-md);

    background:
        linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.014));

    box-shadow:
        0 26px 82px rgba(0,0,0,.24);
}

.chat-name {
    color: var(--dim);
    font-size: .60rem;
    font-weight: 700;
    letter-spacing: .13em;
}

.chat-message {
    margin-top: 10px;

    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.46;
}

.chat-warning {
    margin-top: 15px;
    padding-top: 13px;

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

    color: var(--orange-hot);
    font-size: .75rem;
}

.bad-vault-stack {
    width: 100%;
    display: grid;
    gap: 10px;
}

.bad-vault-item {
    padding: 15px;

    border: 1px solid var(--line);
    border-radius: var(--radius-sm);

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

    color: var(--muted);
    font-size: .85rem;

    transition:
        border-color 160ms ease,
        transform 160ms ease;
}

.bad-vault-item:hover {
    transform: translateX(3px);
    border-color: rgba(255,135,61,.20);
}

.bad-vault-item strong {
    color: var(--text);
}


/* =========================================================
   MFA VISUALS
   ========================================================= */

.phone-shell {
    width: 240px;
    min-height: 398px;
    margin: auto;
    padding: 18px 14px;

    position: relative;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 30px;

    background:
        radial-gradient(circle at 50% 0%, rgba(113,231,255,.035), transparent 32%),
        #090d14;

    box-shadow:
        inset 0 0 0 4px rgba(255,255,255,.012),
        0 32px 95px rgba(0,0,0,.38);
}

.phone-shell::after {
    content: "";
    position: absolute;
    width: 72px;
    height: 3px;
    left: 50%;
    bottom: 12px;

    border-radius: 99px;

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

    transform: translateX(-50%);
}

.phone-speaker {
    width: 58px;
    height: 5px;
    margin: 0 auto 26px;

    border-radius: 99px;

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

.mfa-prompt {
    padding: 16px;

    border: 1px solid rgba(113,231,255,.22);
    border-radius: var(--radius-md);

    background:
        linear-gradient(145deg, rgba(113,231,255,.055), rgba(113,231,255,.018));

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

.mfa-prompt + .mfa-prompt {
    margin-top: 9px;
    opacity: .72;
}

.mfa-prompt:nth-of-type(3) {
    opacity: .47;
}

.mfa-app {
    color: var(--cyan);
    font-size: .63rem;
    font-weight: 720;
    letter-spacing: .13em;
}

.mfa-question {
    margin: 9px 0 13px;

    color: var(--text);
    font-size: 1.02rem;
    line-height: 1.4;
}

.mfa-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.mfa-option {
    padding: 9px;

    text-align: center;

    border: 1px solid var(--line);
    border-radius: 6px;

    color: var(--muted);
    font-size: .70rem;
}

.mfa-option.deny {
    border-color: rgba(255,135,61,.32);
    background: rgba(255,135,61,.025);
    color: var(--orange-hot);
}

.match-number {
    font-size: clamp(5rem, 13vw, 9rem);
    font-weight: 640;
    line-height: 1;
    letter-spacing: -.085em;

    color: transparent;

    background:
        linear-gradient(120deg, var(--cyan), var(--blue) 42%, var(--orange));

    background-clip: text;
    -webkit-background-clip: text;

    filter:
        drop-shadow(0 10px 35px rgba(113,231,255,.07));
}


/* =========================================================
   COMPLETION
   ========================================================= */

.completion-mark {
    width: 66px;
    height: 66px;
    margin-bottom: 28px;

    display: grid;
    place-items: center;

    position: relative;

    border: 1px solid rgba(113,231,255,.30);
    border-radius: 50%;

    color: var(--cyan);
    font-size: 1.65rem;

    background:
        radial-gradient(circle, rgba(113,231,255,.065), transparent 68%);

    box-shadow:
        0 0 45px rgba(113,231,255,.065);
}

.completion-mark::after {
    content: "";
    position: absolute;
    inset: -9px;

    border: 1px solid rgba(255,255,255,.035);
    border-radius: 50%;
}

.takeaway-box {
    max-width: 760px;
    margin-top: 34px;
    padding: 26px;

    border: 1px solid var(--line);
    border-radius: var(--radius-md);

    background:
        linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
}

.takeaway-box small {
    color: var(--orange);
    font-size: .60rem;
    font-weight: 700;
    letter-spacing: .17em;
}

.takeaway-box p {
    margin: 10px 0 0;

    color: var(--text);
    font-size: 1.2rem;
    line-height: 1.56;
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes stageIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .lesson-stage.split {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .visual-panel {
        min-height: 340px;
    }
}

@media (max-width: 600px) {

    .lesson-shell {
        width: calc(100% - 32px);
    }

    .lesson-topbar {
        min-height: 75px;
    }

    .lesson-stage {
        padding: 54px 0 60px;
    }

    .lesson-copy h1 {
        font-size: clamp(3rem, 14vw, 4.5rem);
    }

    .lesson-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .lesson-button {
        width: 100%;
    }

    .visual-panel {
        min-height: 310px;
    }

    .visual-center {
        padding: 38px 24px;
    }

    .phone-shell {
        width: 210px;
        min-height: 350px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lesson-stage {
        animation: none;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}