/* =========================================================
   PAGE 19 · MISSION 02 · STAGE 01 · RECONNECT
========================================================= */

#page19Reconnect{

    --purple:#A66CFF;
    --purple-light:#D0B2FF;
    --purple-deep:#6536D1;

    --cyan:#53E6F5;

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;

    overflow:hidden;

    color:#F6F4FF;

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

    background:

        linear-gradient(
            115deg,
            rgba(6,11,30,.92),
            rgba(25,20,67,.77) 48%,
            rgba(5,14,36,.88)
        ),

        url("../assets/images/cover-bg.jpg");

    background-size:cover;
    background-position:center;

}


#page19Reconnect::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 62% 43%,
            transparent 18%,
            rgba(14,7,42,.13) 60%,
            rgba(2,5,18,.40) 100%
        );

}


/* =========================================================
   STAGE
========================================================= */

#page19Reconnect .p19-stage{

    position:absolute;

    inset:0;

    z-index:10;

    box-sizing:border-box;

    padding:
        22px
        46px
        24px;

    display:grid;

    grid-template-rows:
        90px
        minmax(0,1fr);

    gap:14px;

}


/* =========================================================
   GLOW
========================================================= */

#page19Reconnect .p19-glow{

    position:absolute;

    z-index:-1;

    border-radius:50%;

    pointer-events:none;

}


#page19Reconnect .p19-glow-a{

    width:700px;
    height:700px;

    right:80px;
    top:35px;

    background:

        radial-gradient(
            circle,
            rgba(166,102,255,.17),
            rgba(89,48,197,.06) 43%,
            transparent 70%
        );

}


#page19Reconnect .p19-glow-b{

    width:500px;
    height:500px;

    left:-180px;
    bottom:-180px;

    background:

        radial-gradient(
            circle,
            rgba(45,206,255,.10),
            transparent 70%
        );

}


/* =========================================================
   HEADER
========================================================= */

#page19Reconnect .p19-header{

    display:grid;

    grid-template-columns:
        1fr
        auto
        220px;

    align-items:center;

    gap:25px;

    border-bottom:
        1px solid
        rgba(181,124,255,.38);

}


#page19Reconnect .p19-header-left{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


#page19Reconnect .p19-header-left span{

    color:#C495FF;

    font-size:17px;

    font-weight:900;

    letter-spacing:1.8px;

}


#page19Reconnect .p19-header-left strong{

    margin-top:3px;

    color:#FFF;

    font-size:31px;

    line-height:1;

    font-weight:900;

}


#page19Reconnect .p19-header-left small{

    margin-top:5px;

    color:#C5A3ED;

    font-size:16px;

    font-weight:750;

}


/* stage path */

#page19Reconnect .p19-stage-path{

    display:flex;

    align-items:center;

    gap:6px;

}


#page19Reconnect .p19-stage-path span{

    width:30px;
    height:30px;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:#746688;

    border:
        1px solid
        rgba(129,105,159,.27);

    background:
        rgba(19,18,44,.52);

    font-size:12px;

    font-weight:900;

}


#page19Reconnect .p19-stage-path .is-current{

    color:#FFF;

    border-color:#C28EFF;

    background:#7846D5;

    box-shadow:

        0 0 11px
        rgba(181,111,255,.47);

}


#page19Reconnect .p19-stage-path i{

    color:#715C89;

    font-size:12px;

    font-style:normal;

}


/* score */

#page19Reconnect .p19-score{

    justify-self:end;

    min-width:190px;

    box-sizing:border-box;

    padding:8px 12px;

    text-align:center;

    border:
        1px solid
        rgba(186,128,255,.58);

    border-radius:13px;

    background:
        rgba(17,15,50,.58);

}


#page19Reconnect .p19-score strong{

    display:block;

    color:#FFF;

    font-size:24px;

    font-weight:900;

}


#page19Reconnect .p19-score span{

    display:block;

    margin-top:2px;

    color:#C395FF;

    font-size:11px;

    font-weight:900;

    letter-spacing:1.3px;

}


/* =========================================================
   MAIN
========================================================= */

#page19Reconnect .p19-main{

    min-height:0;

    display:grid;

    grid-template-columns:
        315px
        minmax(0,1fr);

    gap:24px;

}


/* =========================================================
   NOVA PANEL
========================================================= */

#page19Reconnect .p19-nova-panel{

    min-height:0;

    box-sizing:border-box;

    padding:18px 20px;

    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)
        );

}


#page19Reconnect .p19-nova{

    position:relative;

    width:180px;
    height:180px;

    display:grid;

    place-items:center;
    transform: translateY(-25px);

}


#page19Reconnect .p19-nova img{

    position:relative;

    z-index:2;

    width:165px;

    object-fit:contain;

    filter:

        drop-shadow(
            0 0 10px
            rgba(96,225,255,.63)
        )

        drop-shadow(
            0 0 26px
            rgba(78,126,255,.30)
        );

    animation:
        p19NovaFloat
        4.5s
        ease-in-out
        infinite;

}


#page19Reconnect .p19-nova-aura{

    position:absolute;

    width:190px;
    height:190px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(65,213,255,.14),
            rgba(100,82,255,.06) 43%,
            transparent 72%
        );

}


#page19Reconnect .p19-nova-copy{

    width:100%;

}


#page19Reconnect .p19-nova-copy > span{

    color:#BC89FF;

    font-size:14px;

    font-weight:950;

    letter-spacing:1.5px;

}


#page19Reconnect .p19-nova-copy > strong{

    display:block;

    margin-top:7px;

    color:#FFF;

    font-size:19px;

    line-height:1.28;

    font-weight:900;

}


#page19Reconnect .p19-nova-copy p{

    margin:
        10px
        0
        8px;

    color:#DCE7F2;

    font-size:15px;

    line-height:1.42;

    font-weight:650;

}


#page19Reconnect .p19-nova-copy p strong{

    color:#CAA7FF;

}


#page19Reconnect .p19-nova-copy small{

    color:#B9CCE1;

    font-size:14px;

    line-height:1.4;

    font-weight:650;

}


/* toolkit */

#page19Reconnect .p19-toolkit{

    width:100%;

    margin-top:auto;

    box-sizing:border-box;

    padding:12px 14px;

    display:flex;

    flex-direction:column;

    border-top:
        1px solid
        rgba(179,123,255,.22);

}


#page19Reconnect .p19-toolkit span{

    color:#8C6AB1;

    font-size:10px;

    font-weight:900;

    letter-spacing:1.4px;

}


#page19Reconnect .p19-toolkit strong{

    margin-top:3px;

    color:#CBAAFF;

    font-size:16px;

    font-weight:900;

}


#page19Reconnect .p19-toolkit small{

    color:#A994C7;

    font-size:13px;

}


/* =========================================================
   WORKSPACE
========================================================= */

#page19Reconnect .p19-workspace{

    min-height:0;

    box-sizing:border-box;

    padding:
        23px
        28px
        20px;

    display:flex;

    flex-direction:column;

    border:
        1px solid
        rgba(179,124,255,.30);

    border-radius:18px;

    background:

        linear-gradient(
            160deg,
            rgba(14,16,50,.74),
            rgba(4,19,46,.68)
        );

}


#page19Reconnect .p19-question-label{

    color:#B67CFF;

    font-size:12px;

    font-weight:950;

    letter-spacing:1.7px;

}


#page19Reconnect .p19-workspace h1{

    margin:
        7px
        0
        0;

    color:#FFF;

    font-size:35px;

    line-height:1.08;

    font-weight:900;

}


#page19Reconnect .p19-workspace h1 span{

    color:#CAA2FF;

    text-shadow:
        0 0 15px
        rgba(177,105,255,.36);

}


#page19Reconnect .p19-question-cn{

    margin:
        6px
        0
        16px;

    color:#C0A0EC;

    font-size:18px;

    font-weight:800;

}


/* task block */

#page19Reconnect .p19-task-block{

    box-sizing:border-box;

    padding:
        12px
        14px;

    border-top:
        1px solid
        rgba(177,121,255,.18);

}


#page19Reconnect .p19-task-heading{

    display:flex;

    align-items:center;

    gap:11px;

}


#page19Reconnect .p19-task-heading > span{

    width:31px;
    height:31px;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:#D9BEFF;

    border:
        1px solid
        rgba(191,139,255,.54);

    background:
        rgba(94,49,177,.28);

    font-size:13px;

    font-weight:950;

}


#page19Reconnect .p19-task-heading div{

    display:flex;

    flex-direction:column;

}


#page19Reconnect .p19-task-heading strong{

    color:#FFF;

    font-size:15px;

    font-weight:900;

}


#page19Reconnect .p19-task-heading small{

    margin-top:2px;

    color:#A88FC5;

    font-size:13px;

    font-weight:700;

}


/* =========================================================
   POSITION OPTIONS
========================================================= */

#page19Reconnect .p19-position-options{

    margin-top:11px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;

}


#page19Reconnect .p19-position{

    appearance:none;

    min-height:84px;

    box-sizing:border-box;

    padding:
        10px
        13px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    border:
        1px solid
        rgba(132,107,166,.28);

    border-radius:12px;

    color:#FFF;

    background:
        rgba(8,19,44,.62);

    font-family:inherit;

    cursor:pointer;

    transition:
        .2s ease;

}


#page19Reconnect .p19-position span{

    color:#A984DA;

    font-size:11px;

    font-weight:950;

    letter-spacing:1.2px;

}


#page19Reconnect .p19-position strong{

    margin-top:4px;

    color:#EFF5FF;

    font-size:17px;

    font-weight:900;

}


#page19Reconnect .p19-position small{

    margin-top:3px;

    color:#9E8AB9;

    font-size:13px;

    font-weight:750;

}


#page19Reconnect .p19-position:hover{

    transform:
        translateY(-2px);

    border-color:
        rgba(187,133,255,.62);

}


#page19Reconnect .p19-position.is-selected{

    border-color:#C38EFF;

    background:

        linear-gradient(
            145deg,
            rgba(105,57,198,.62),
            rgba(40,37,97,.78)
        );

    box-shadow:

        0 0 15px
        rgba(177,102,255,.21);

}


#page19Reconnect
.p19-position.is-selected
span{

    color:#D6B8FF;

}


#page19Reconnect
.p19-position.is-selected
small{

    color:#C2A9E7;

}


/* =========================================================
   REASONS
========================================================= */

#page19Reconnect .p19-reason-options{

    margin-top:10px;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:9px;

}


#page19Reconnect .p19-reason{

    appearance:none;

    min-height:59px;

    box-sizing:border-box;

    padding:
        8px
        9px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border:
        1px solid
        rgba(125,103,157,.25);

    border-radius:10px;

    background:
        rgba(7,18,42,.58);

    font-family:inherit;

    cursor:pointer;

}


#page19Reconnect .p19-reason strong{

    color:#CFC3E3;

    font-size:13px;

    font-weight:900;

}


#page19Reconnect .p19-reason small{

    margin-top:3px;

    color:#907FA9;

    font-size:11px;

    font-weight:700;

}


#page19Reconnect .p19-reason.is-selected{

    border-color:
        rgba(188,134,255,.76);

    background:
        rgba(89,49,166,.48);

    box-shadow:

        0 0 11px
        rgba(173,101,255,.15);

}


#page19Reconnect
.p19-reason.is-selected
strong{

    color:#FFF;

}


#page19Reconnect
.p19-reason.is-selected
small{

    color:#C5ABE9;

}


/* =========================================================
   ACTION
========================================================= */

#page19Reconnect .p19-action-row{

    margin-top:auto;

    padding-top:11px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-top:
        1px solid
        rgba(179,123,255,.17);

}


#page19Reconnect .p19-position-summary{

    display:flex;

    flex-direction:column;

}


#page19Reconnect .p19-position-summary span{

    color:#8E70AE;

    font-size:10px;

    font-weight:950;

    letter-spacing:1.4px;

}


#page19Reconnect .p19-position-summary strong{

    margin-top:3px;

    color:#D3C8E4;

    font-size:14px;

    font-weight:900;

}


#page19Reconnect .p19-position-summary small{

    margin-top:2px;

    color:#867A97;

    font-size:11px;

}


/* lock button */

#page19Reconnect .p19-lock-button{

    appearance:none;

    border:
        1px solid
        #B67BFF;

    border-radius:11px;

    padding:
        11px
        18px;

    color:#FFF;

    background:

        linear-gradient(
            120deg,
            #8644DF,
            #5652D9
        );

    box-shadow:

        0 0 15px
        rgba(175,101,255,.26);

    font-family:inherit;

    font-size:14px;

    font-weight:950;

    cursor:pointer;

}


#page19Reconnect .p19-lock-button:disabled{

    opacity:.32;

    filter:saturate(.55);

    cursor:default;

}


#page19Reconnect .p19-lock-button i{

    margin-left:8px;

    font-style:normal;

}


/* =========================================================
   COMPLETE
========================================================= */

#page19Reconnect .p19-complete{

    position:absolute;

    z-index:50;

    left:46px;
    right:46px;
    bottom:24px;

    box-sizing:border-box;

    padding:
        14px
        18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    border:
        1px solid
        rgba(190,139,255,.80);

    border-radius:14px;

    background:

        linear-gradient(
            120deg,
            rgba(61,37,111,.96),
            rgba(28,33,88,.96)
        );

    box-shadow:

        0 0 22px
        rgba(171,100,255,.22);

    opacity:0;

    visibility:hidden;

    transform:
        translateY(14px);

    transition:
        .35s ease;

}


#page19Reconnect .p19-complete.is-visible{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0);

}


#page19Reconnect .p19-complete > div{

    display:flex;

    flex-direction:column;

}


#page19Reconnect .p19-complete span{

    color:#CEACFF;

    font-size:11px;

    font-weight:950;

    letter-spacing:1.2px;

}


#page19Reconnect .p19-complete strong{

    margin-top:3px;

    color:#FFF;

    font-size:20px;

    font-weight:900;

}


#page19Reconnect .p19-complete small{

    margin-top:3px;

    color:#C5B4DB;

    font-size:12px;

}


#page19Reconnect .p19-complete button{

    appearance:none;

    border:
        1px solid
        #C092FF;

    border-radius:10px;

    padding:
        11px
        16px;

    color:#FFF;

    background:#7F4ED8;

    font-family:inherit;

    font-size:14px;

    font-weight:950;

    cursor:pointer;

}


#page19Reconnect .p19-complete button i{

    margin-left:8px;

    font-style:normal;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes p19NovaFloat{

    0%,100%{
        transform:
            translateY(3px);
    }

    50%{
        transform:
            translateY(-6px);
    }

}


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

    #page19Reconnect *{

        animation:none!important;

        transition:none!important;

    }

}
/* =========================================================
   PAGE 19 · REFINEMENT 2026-08-18
   Classroom readability + STEP 02 2x2 layout
========================================================= */

/* Header: clearer hierarchy for projection */
#page19Reconnect .p19-header-left span{font-size:19px;}
#page19Reconnect .p19-header-left strong{font-size:34px;}
#page19Reconnect .p19-header-left small{font-size:18px; line-height:1.25;}
#page19Reconnect .p19-score strong{font-size:26px;}
#page19Reconnect .p19-score span{font-size:13px;}

/* NOVA copy: enlarge without changing the adjusted NOVA position */
#page19Reconnect .p19-nova-copy > span{font-size:16px;}
#page19Reconnect .p19-nova-copy > strong{font-size:21px; line-height:1.3;}
#page19Reconnect .p19-nova-copy p{font-size:16.5px; line-height:1.45;}
#page19Reconnect .p19-nova-copy small{font-size:15.5px; line-height:1.45;}
#page19Reconnect .p19-toolkit span{font-size:12px;}
#page19Reconnect .p19-toolkit strong{font-size:18px;}
#page19Reconnect .p19-toolkit small{font-size:15px;}

/* Driving question */
#page19Reconnect .p19-question-label{font-size:14px;}
#page19Reconnect .p19-workspace h1{font-size:38px;}
#page19Reconnect .p19-question-cn{font-size:21px; margin-bottom:14px;}

/* Task headings */
#page19Reconnect .p19-task-heading > span{width:34px; height:34px; font-size:15px;}
#page19Reconnect .p19-task-heading strong{font-size:18px;}
#page19Reconnect .p19-task-heading small{font-size:15px; line-height:1.25;}

/* STEP 01 choices */
#page19Reconnect .p19-position{min-height:88px; padding:10px 14px;}
#page19Reconnect .p19-position span{font-size:13px;}
#page19Reconnect .p19-position strong{font-size:19px;}
#page19Reconnect .p19-position small{font-size:15px;}

/* STEP 02: two columns × two rows, so the four factors read as real choices */
#page19Reconnect .p19-reason-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(64px,auto));
    gap:10px 12px;
    margin-top:11px;
}
#page19Reconnect .p19-reason{
    min-height:64px;
    padding:9px 14px;
    align-items:flex-start;
    text-align:left;
}
#page19Reconnect .p19-reason strong{font-size:16px;}
#page19Reconnect .p19-reason small{font-size:14px; line-height:1.3;}

/* Bottom summary and action */
#page19Reconnect .p19-position-summary span{font-size:12px;}
#page19Reconnect .p19-position-summary strong{font-size:17px;}
#page19Reconnect .p19-position-summary small{font-size:14px;}
#page19Reconnect .p19-lock-button{font-size:16px; padding:12px 20px;}

/* Keep the denser 2x2 STEP 02 comfortably inside the 1600×900 stage */
#page19Reconnect .p19-workspace{padding:20px 26px 18px;}
#page19Reconnect .p19-task-block{padding:11px 14px;}
#page19Reconnect .p19-action-row{padding-top:9px;}

/* Page 19 readability pass v2 — enlarge question-area typography */
#page19Reconnect .p19-task-heading > span{
  width:52px !important;
  height:52px !important;
  font-size:25px !important;
}
#page19Reconnect .p19-task-heading strong{
  font-size:30px !important;
  line-height:1.08 !important;
}
#page19Reconnect .p19-task-heading small{
  font-size:24px !important;
  line-height:1.2 !important;
  margin-top:5px !important;
}
#page19Reconnect .p19-position span{
  font-size:22px !important;
  line-height:1.05 !important;
}
#page19Reconnect .p19-position strong{
  font-size:30px !important;
  line-height:1.12 !important;
}
#page19Reconnect .p19-position small{
  font-size:24px !important;
  line-height:1.15 !important;
}
#page19Reconnect .p19-reason strong{
  font-size:27px !important;
  line-height:1.08 !important;
}
#page19Reconnect .p19-reason small{
  font-size:23px !important;
  line-height:1.2 !important;
  margin-top:5px !important;
}