/* =========================================================
   PAGE 22 · MISSION 02 · STAGE 04 · METHODS
   Large-type, dense-layout version
========================================================= */

#page22Methods{
    --purple:#A86DFF;
    --purple-light:#D1B4FF;
    --purple-deep:#6336CF;
    --cyan:#55E6F4;

    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
    overflow:hidden;
    color:#F8F5FF;

    font-family:
        Inter,
        "SF Pro Display",
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        linear-gradient(
            115deg,
            rgba(6,11,30,.90),
            rgba(25,20,67,.74) 48%,
            rgba(5,14,36,.86)
        ),
        url("../assets/images/cover-bg.jpg") center/cover no-repeat;
}

#page22Methods::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 61% 43%,
            transparent 18%,
            rgba(14,7,42,.12) 60%,
            rgba(2,5,18,.38) 100%
        );
}

#page22Methods .p22-stage{
    position:absolute;
    inset:0;
    z-index:10;
    box-sizing:border-box;
    padding:20px 44px 22px;
    display:grid;
    grid-template-rows:88px minmax(0,1fr);
    gap:12px;
}

/* Header */
#page22Methods .p22-header{
    display:grid;
    grid-template-columns:1fr auto 205px;
    gap:22px;
    align-items:center;
    border-bottom:1px solid rgba(181,124,255,.38);
}

#page22Methods .p22-header-left{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

#page22Methods .p22-header-left span{
    color:#C697FF;
    font-size:20px;
    font-weight:900;
    letter-spacing:1.8px;
}

#page22Methods .p22-header-left strong{
    margin-top:2px;
    color:#FFF;
    font-size:35px;
    line-height:1;
    font-weight:950;
}

#page22Methods .p22-header-left small{
    margin-top:5px;
    color:#C9A8EE;
    font-size:20px;
    font-weight:800;
}

/* stage path */
#page22Methods .p22-stage-path{
    display:flex;
    align-items:center;
    gap:6px;
}

#page22Methods .p22-stage-path span{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#786A8C;
    border:1px solid rgba(126,103,155,.28);
    background:rgba(19,18,44,.54);
    font-size:13px;
    font-weight:950;
}

#page22Methods .p22-stage-path .is-current{
    color:#FFF;
    border-color:#C492FF;
    background:#7946D5;
    box-shadow:0 0 12px rgba(181,111,255,.48);
}

#page22Methods .p22-stage-path .is-complete{
    color:#9BFAFF;
    border-color:#53DEE8;
    background:rgba(28,130,150,.47);
}

#page22Methods .p22-stage-path i{
    color:#75628C;
    font-size:13px;
    font-style:normal;
}

/* Score */
#page22Methods .p22-score{
    justify-self:end;
    min-width:185px;
    box-sizing:border-box;
    padding:7px 11px;
    text-align:center;
    border:1px solid rgba(186,128,255,.58);
    border-radius:13px;
    background:rgba(17,15,50,.58);
}

#page22Methods .p22-score strong{
    display:block;
    color:#FFF;
    font-size:24px;
    font-weight:950;
}

#page22Methods .p22-score span{
    display:block;
    margin-top:2px;
    color:#C397FF;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.3px;
}

/* Main */
#page22Methods .p22-main{
    min-height:0;
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:20px;
}

/* NOVA */
#page22Methods .p22-nova-panel{
    min-height:0;
    box-sizing:border-box;
    padding:14px 18px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    border:1px solid rgba(174,119,255,.34);
    border-radius:18px;
    background:
        linear-gradient(
            160deg,
            rgba(17,17,53,.74),
            rgba(5,22,50,.68)
        );
}

#page22Methods .p22-nova{
    position:relative;
    width:148px;
    height:148px;
    display:grid;
    place-items:center;
    transform:translateY(-24px);
    margin-bottom:-6px;
}

#page22Methods .p22-nova img{
    position:relative;
    z-index:2;
    width:138px;
    object-fit:contain;
    filter:
        drop-shadow(0 0 10px rgba(96,225,255,.63))
        drop-shadow(0 0 25px rgba(78,126,255,.30));
    animation:p22NovaFloat 4.5s ease-in-out infinite;
}

#page22Methods .p22-nova-aura{
    position:absolute;
    width:155px;
    height:155px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(65,213,255,.14),
            rgba(100,82,255,.06) 43%,
            transparent 72%
        );
}

#page22Methods .p22-nova-copy{
    width:100%;
    margin-top:6px;
}

#page22Methods .p22-nova-copy > span{
    color:#BC89FF;
    font-size:20px;
    line-height:1.15;
    font-weight:950;
    letter-spacing:1.3px;
}

#page22Methods .p22-nova-copy > strong{
    display:block;
    margin-top:12px;
    color:#FFF;
    font-size:25px;
    line-height:1.28;
    font-weight:900;
}

#page22Methods .p22-nova-copy p{
    margin:12px 0 9px;
    color:#E2E9F4;
    font-size:21px;
    line-height:1.38;
    font-weight:700;
}

#page22Methods .p22-nova-copy p b{
    color:#D0B1FF;
}

#page22Methods .p22-nova-copy small{
    color:#C5D2E3;
    font-size:19px;
    line-height:1.42;
    font-weight:700;
}

#page22Methods .p22-tool{
    width:100%;
    margin-top:auto;
    box-sizing:border-box;
    padding:14px 0 0;
    display:flex;
    flex-direction:column;
    border-top:1px solid rgba(179,123,255,.22);
}

#page22Methods .p22-tool span{
    color:#A681C7;
    font-size:15px;
    font-weight:900;
    letter-spacing:1.2px;
}

#page22Methods .p22-tool strong{
    margin-top:4px;
    color:#CFAEFF;
    font-size:22px;
    font-weight:950;
}

#page22Methods .p22-tool small{
    margin-top:3px;
    color:#B9A2D3;
    font-size:18px;
    font-weight:750;
}

/* Workspace */
#page22Methods .p22-workspace{
    min-height:0;
    box-sizing:border-box;
    padding:18px 20px;
    display:grid;
    grid-template-rows:76px 180px minmax(0,1fr);
    gap:11px;
    border:1px solid rgba(179,124,255,.30);
    border-radius:18px;
    background:
        linear-gradient(
            160deg,
            rgba(14,16,50,.73),
            rgba(4,19,46,.67)
        );
}

#page22Methods .p22-workspace-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

#page22Methods .p22-workspace-head > div:first-child{
    display:flex;
    flex-direction:column;
}

#page22Methods .p22-workspace-head span{
    color:#B77EFF;
    font-size:15px;
    font-weight:950;
    letter-spacing:1.5px;
}

#page22Methods .p22-workspace-head h1{
    margin:4px 0 0;
    color:#FFF;
    font-size:33px;
    line-height:1;
    font-weight:950;
}

#page22Methods .p22-workspace-head h1 b{
    color:#CCA7FF;
}

#page22Methods .p22-workspace-head small{
    margin-top:5px;
    color:#BFA2E6;
    font-size:19px;
    font-weight:800;
}

#page22Methods .p22-progress-box{
    min-width:145px;
    box-sizing:border-box;
    padding:8px 11px;
    display:flex;
    flex-direction:column;
    align-items:center;
    border:1px solid rgba(183,128,255,.34);
    border-radius:11px;
    background:rgba(18,17,50,.50);
}

#page22Methods .p22-progress-box span{
    color:#9576BA;
    font-size:11px;
}

#page22Methods .p22-progress-box strong{
    margin-top:2px;
    color:#D0B4F4;
    font-size:19px;
}

/* method cards */
#page22Methods .p22-method-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

#page22Methods .p22-method-card{
    position:relative;
    box-sizing:border-box;
    padding:14px 15px 13px;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(132,107,166,.30);
    border-radius:14px;
    background:
        linear-gradient(
            145deg,
            rgba(17,18,48,.82),
            rgba(8,20,46,.72)
        );
    transition:.3s ease;
}

#page22Methods .p22-method-top{
    display:flex;
    align-items:center;
    gap:10px;
}

#page22Methods .p22-method-number{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    flex:0 0 38px;
    border-radius:50%;
    color:#A993BF;
    border:1px solid rgba(145,113,181,.30);
    font-size:15px;
    font-weight:950;
}

#page22Methods .p22-method-top > div{
    display:flex;
    flex-direction:column;
}

#page22Methods .p22-method-top strong{
    color:#F2ECFB;
    font-size:21px;
    line-height:1;
    font-weight:950;
}

#page22Methods .p22-method-top small{
    margin-top:3px;
    color:#B49BCB;
    font-size:17px;
    font-weight:800;
}

#page22Methods .p22-method-card p{
    margin:10px 0 0;
    color:#D9E1EC;
    font-size:17px;
    line-height:1.28;
    font-weight:650;
}

#page22Methods .p22-method-card em{
    margin-top:6px;
    color:#BDA0E3;
    font-size:16px;
    line-height:1.2;
    font-style:normal;
    font-weight:750;
}

#page22Methods .p22-method-card > b{
    margin-top:auto;
    color:#726A81;
    font-size:12px;
    font-weight:950;
    letter-spacing:.8px;
}

#page22Methods .p22-method-card.is-identified{
    border-color:#BD86FF;
    background:
        linear-gradient(
            145deg,
            rgba(94,49,179,.70),
            rgba(37,36,94,.82)
        );
    box-shadow:
        0 0 17px rgba(176,101,255,.25),
        inset 0 0 20px rgba(191,137,255,.07);
}

#page22Methods .p22-method-card.is-identified .p22-method-number{
    color:#FFF;
    border-color:#C99AFF;
    background:#7444CE;
    box-shadow:0 0 11px rgba(183,108,255,.45);
}

#page22Methods .p22-method-card.is-identified > b{
    color:#DBBEFF;
}

/* evidence lab */
#page22Methods .p22-evidence-lab{
    min-height:0;
    box-sizing:border-box;
    padding:10px 12px 11px;
    display:grid;
    grid-template-columns:1.55fr 1fr;
    grid-template-rows:48px minmax(0,1fr) 64px;
    gap:9px 12px;
    border-top:1px solid rgba(179,123,255,.20);
}

#page22Methods .p22-evidence-head{
    grid-column:1/3;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

#page22Methods .p22-evidence-head > div{
    display:flex;
    flex-direction:column;
}

#page22Methods .p22-evidence-head span{
    color:#A87BD8;
    font-size:12px;
    font-weight:950;
    letter-spacing:1.2px;
}

#page22Methods .p22-evidence-head strong{
    margin-top:2px;
    color:#D6BBF8;
    font-size:17px;
    font-weight:950;
}

#page22Methods .p22-evidence-head > small{
    color:#B7A1D0;
    font-size:16px;
    font-weight:700;
}

#page22Methods .p22-evidence-card{
    box-sizing:border-box;
    padding:14px 16px;
    border:1px solid rgba(183,126,255,.35);
    border-radius:12px;
    background:rgba(23,21,62,.66);
}

#page22Methods .p22-evidence-card span{
    color:#B57FFF;
    font-size:13px;
    font-weight:950;
    letter-spacing:1.1px;
}

#page22Methods .p22-evidence-card p{
    margin:8px 0 0;
    color:#F4F6FF;
    font-size:23px;
    line-height:1.34;
    font-weight:720;
}

#page22Methods .p22-choice-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}

#page22Methods .p22-choice-grid button{
    appearance:none;
    box-sizing:border-box;
    padding:9px 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid rgba(128,103,160,.28);
    border-radius:10px;
    color:#FFF;
    background:rgba(8,18,43,.64);
    font-family:inherit;
    cursor:pointer;
    transition:.18s ease;
}

#page22Methods .p22-choice-grid strong{
    color:#E4DCEE;
    font-size:18px;
    font-weight:950;
}

#page22Methods .p22-choice-grid small{
    color:#AF9CC4;
    font-size:16px;
    font-weight:750;
}

#page22Methods .p22-choice-grid button:hover{
    border-color:rgba(188,135,255,.66);
    transform:translateY(-1px);
}

#page22Methods .p22-choice-grid button.is-correct{
    border-color:#BA82FF;
    background:rgba(102,55,189,.62);
    box-shadow:0 0 12px rgba(174,101,255,.22);
}

#page22Methods .p22-choice-grid button.is-wrong{
    border-color:rgba(255,115,152,.55);
    background:rgba(103,32,65,.43);
}

#page22Methods .p22-feedback{
    grid-column:1/3;
    display:flex;
    align-items:center;
    gap:12px;
    box-sizing:border-box;
    padding:8px 12px;
    border:1px solid rgba(128,105,160,.23);
    border-radius:10px;
    background:rgba(7,17,41,.57);
}

#page22Methods .p22-feedback span{
    color:#A783CA;
    font-size:12px;
    font-weight:950;
    letter-spacing:1.2px;
}

#page22Methods .p22-feedback strong{
    color:#D5CBE3;
    font-size:17px;
    font-weight:850;
}

#page22Methods .p22-feedback small{
    margin-left:auto;
    color:#A191B3;
    font-size:15px;
    font-weight:700;
}

#page22Methods .p22-feedback.is-success{
    border-color:rgba(184,130,255,.55);
    background:rgba(67,43,120,.44);
}

/* complete */
#page22Methods .p22-complete{
    position:absolute;
    z-index:50;
    left:44px;
    right:44px;
    bottom:22px;
    box-sizing:border-box;
    padding:13px 17px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:24px;
    align-items:center;
    border:1px solid rgba(194,143,255,.83);
    border-radius:14px;
    background:
        linear-gradient(
            120deg,
            rgba(61,37,111,.97),
            rgba(28,33,88,.97)
        );
    box-shadow:0 0 24px rgba(170,100,255,.24);
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    transition:.35s ease;
}

#page22Methods .p22-complete.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

#page22Methods .p22-complete > div:first-child{
    display:flex;
    flex-direction:column;
    min-width:0;
}

#page22Methods .p22-complete span{
    color:#CCA8FF;
    font-size:13px;
    font-weight:950;
    letter-spacing:1.2px;
}

#page22Methods .p22-complete strong{
    margin-top:4px;
    color:#FFF;
    font-size:22px;
    line-height:1.15;
    font-weight:950;
}

#page22Methods .p22-complete strong i{
    margin:0 7px;
    color:#C08FFF;
    font-style:normal;
}

#page22Methods .p22-complete small{
    margin-top:4px;
    color:#CCBDE1;
    font-size:15px;
    line-height:1.25;
    font-weight:700;
}

#page22Methods .p22-complete-right{
    display:flex;
    align-items:center;
    gap:16px;
}

#page22Methods .p22-complete-right > b{
    color:#E1C8FF;
    font-size:19px;
    font-weight:950;
}

#page22Methods .p22-complete button{
    appearance:none;
    border:1px solid #C190FF;
    border-radius:10px;
    padding:11px 16px;
    color:#FFF;
    background:#8050D8;
    font-family:inherit;
    font-size:15px;
    font-weight:950;
    cursor:pointer;
}

#page22Methods .p22-complete button i{
    margin-left:8px;
    font-style:normal;
}

@keyframes p22NovaFloat{
    0%,100%{transform:translateY(3px)}
    50%{transform:translateY(-6px)}
}

@media (prefers-reduced-motion:reduce){
    #page22Methods *{
        animation:none!important;
        transition:none!important;
    }
}