/* ============================================================
   Studio NØSa Camera Examination System
   SCES Design System
   Version 1.0
   Part 1
============================================================ */

/* ============================================================
   RESET
============================================================ */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    font-family:
        "Inter",
        "Noto Sans JP",
        sans-serif;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
    border:none;
    background:none;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

img{
    display:block;
    max-width:100%;
}

::selection{
    background:#005BAC;
    color:white;
}

/* ============================================================
   VARIABLES
============================================================ */

:root{

    /* Brand */

    --primary:#005BAC;
    --primary-dark:#004B90;

    --success:#22C55E;
    --danger:#EF4444;
    --warning:#F59E0B;

    /* Background */

    --bg:#F4F6FA;
    --surface:#FFFFFF;

    /* Border */

    --border:#D6DCE5;
    --border-dark:#C4CCD7;

    /* Text */

    --text:#202938;
    --text-light:#667085;
    --text-disabled:#9CA3AF;

    /* Shadow */

    --shadow-sm:
    0 2px 8px rgba(0,0,0,.05);

    --shadow-md:
    0 10px 25px rgba(0,0,0,.08);

    --shadow-lg:
    0 20px 50px rgba(0,0,0,.12);

    /* Radius */

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;

    /* Layout */

    --navbar-height:72px;

    --sidebar-width:250px;

    --content-width:1400px;

    /* Transition */

    --transition:.25s ease;

}

/* ============================================================
   DARK MODE
============================================================ */

body.dark{

    --bg:#0F141A;

    --surface:#1A212A;

    --border:#313B46;

    --border-dark:#49525E;

    --text:#F4F5F6;

    --text-light:#B5BDC7;

    --text-disabled:#7B8490;

}

/* ============================================================
   BODY
============================================================ */

body{

    background:var(--bg);

    color:var(--text);

    transition:

        background .3s,

        color .3s;

}

.wrapper{

    width:min(
        1400px,
        calc(100% - 60px)
    );

    margin:auto;

}

.page{

    padding-top:var(--navbar-height);

}

/* ============================================================
   TYPOGRAPHY
============================================================ */

h1{

    font-size:2rem;

    font-weight:800;

    line-height:1.2;

}

h2{

    font-size:1.5rem;

    font-weight:700;

}

h3{

    font-size:1.15rem;

    font-weight:700;

}

p{

    line-height:1.7;

    color:var(--text-light);

}

small{

    color:var(--text-light);

}

/* ============================================================
   NAVBAR
============================================================ */

.exam-navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--navbar-height);

    background:var(--surface);

    border-bottom:

        1px solid var(--border);

    z-index:999;

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

}

.exam-navbar__container{

    width:min(
        1500px,
        calc(100% - 40px)
    );

    margin:auto;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.exam-logo{

    display:flex;

    flex-direction:column;

}

.exam-logo__title{

    font-size:1.2rem;

    font-weight:800;

}

.exam-logo__sub{

    font-size:.75rem;

    color:var(--text-light);

    letter-spacing:.12em;

    text-transform:uppercase;

}

.exam-navbar__right{

    display:flex;

    align-items:center;

    gap:20px;

}

/* ============================================================
   TIMER
============================================================ */

.exam-timer{

    text-align:right;

}

.exam-timer__label{

    font-size:.75rem;

    color:var(--text-light);

}

.exam-timer__time{

    font-size:1.5rem;

    font-weight:700;

    color:var(--primary);

    font-variant-numeric:

        tabular-nums;

}

/* ============================================================
   LAYOUT
============================================================ */

.exam-layout{

    display:grid;

    grid-template-columns:

        var(--sidebar-width)

        1fr;

    gap:30px;

    padding:30px;

}

.exam-main{

    min-width:0;

}

.exam-sidebar{

    background:var(--surface);

    border:

        1px solid var(--border);

    border-radius:

        var(--radius-md);

    padding:24px;

    height:

        calc(
            100vh -
            120px
        );

    position:sticky;

    top:90px;

    overflow-y:auto;

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

}

/* ============================================================
   SIDEBAR
============================================================ */

.exam-sidebar__title{

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:var(--text-light);

    margin-bottom:18px;

}

.exam-sidebar__list{

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:10px;

}

.exam-sidebar__item{

    height:44px;

    border:

        1px solid var(--border);

    border-radius:

        var(--radius-sm);

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    transition:

        var(--transition);

}

.exam-sidebar__item:hover{

    border-color:

        var(--primary);

}

.exam-sidebar__item.active{

    background:

        var(--primary);

    color:white;

    border-color:

        var(--primary);

}

.exam-sidebar__item.answered{

    background:

        #E8F2FF;

    border-color:

        var(--primary);

    color:

        var(--primary);

}

.exam-sidebar__legend{

    margin-top:30px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.exam-sidebar__legend div{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.9rem;

}

.exam-dot{

    width:14px;

    height:14px;

    border-radius:50%;

}

.exam-dot.current{

    background:var(--primary);

}

.exam-dot.answered{

    background:var(--success);

}

.exam-dot.unanswered{

    background:#D6DCE5;

}


/* ============================================================
   SCES Design System
   Part 2
   Question Card / Choices / Buttons
============================================================ */

/* ============================================================
   QUESTION CARD
============================================================ */

.exam-card{

    background:var(--surface);

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

    border-radius:var(--radius-lg);

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

    overflow:hidden;

    animation:fadeIn .25s ease;

}

.exam-card__header{

    padding:28px 36px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.exam-card__number{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.exam-card__number small{

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.exam-card__number span{

    font-size:2rem;

    font-weight:800;

    color:var(--primary);

}

.exam-card__status{

    padding:10px 18px;

    border-radius:999px;

    background:#E8F2FF;

    color:var(--primary);

    font-size:.8rem;

    font-weight:700;

}

.exam-card__body{

    padding:42px;

}

.exam-question{

    font-size:1.55rem;

    font-weight:700;

    line-height:1.6;

    margin-bottom:45px;

}

/* ============================================================
   CHOICES
============================================================ */

.exam-choices{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.exam-choice{

    position:relative;

}

.exam-choice input{

    display:none;

}

.exam-choice label{

    display:flex;

    align-items:center;

    gap:20px;

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

    border-radius:14px;

    padding:22px 26px;

    background:var(--surface);

    transition:.25s;

    cursor:pointer;

}

.exam-choice label:hover{

    border-color:var(--primary);

    transform:translateY(-2px);

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

}

.exam-choice__letter{

    width:46px;

    height:46px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:800;

    font-size:1rem;

    transition:.25s;

}

.exam-choice__text{

    flex:1;

    font-size:1.05rem;

    line-height:1.6;

}

.exam-choice input:checked+label{

    border-color:var(--primary);

    background:#EDF5FF;

}

.exam-choice input:checked+label .exam-choice__letter{

    background:var(--primary);

    color:white;

    border-color:var(--primary);

}

/* ============================================================
   PROGRESS
============================================================ */

.exam-progress{

    margin:35px 0;

}

.exam-progress__info{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    font-size:.9rem;

    color:var(--text-light);

}

.exam-progress__bar{

    width:100%;

    height:10px;

    background:#E4E8EE;

    border-radius:999px;

    overflow:hidden;

}

.exam-progress__value{

    height:100%;

    width:0%;

    background:linear-gradient(

        90deg,

        var(--primary),

        #3D8BFF

    );

    transition:.35s;

}

/* ============================================================
   BUTTONS
============================================================ */

.exam-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:45px;

    gap:20px;

}

.exam-actions__left,

.exam-actions__right{

    display:flex;

    gap:15px;

}

.exam-button{

    padding:15px 26px;

    border-radius:10px;

    font-weight:700;

    transition:.25s;

    border:2px solid transparent;

}

.exam-button:hover{

    transform:translateY(-2px);

}

.exam-button:active{

    transform:scale(.97);

}

.exam-button--primary{

    background:var(--primary);

    color:white;

}

.exam-button--primary:hover{

    background:var(--primary-dark);

}

.exam-button--secondary{

    border-color:var(--border);

    background:var(--surface);

    color:var(--text);

}

.exam-button--secondary:hover{

    border-color:var(--primary);

    color:var(--primary);

}

.exam-button--danger{

    background:var(--danger);

    color:white;

}

.exam-button--danger:hover{

    filter:brightness(.92);

}

/* ============================================================
   EXAM FOOTER
============================================================ */

.exam-footer{

    margin-top:40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:25px;

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

}

.exam-footer small{

    color:var(--text-light);

}

/* ============================================================
   BADGES
============================================================ */

.exam-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:#EEF5FF;

    color:var(--primary);

    font-size:.8rem;

    font-weight:700;

}

.exam-badge.success{

    background:#EAFBF1;

    color:var(--success);

}

.exam-badge.warning{

    background:#FFF8E8;

    color:var(--warning);

}

.exam-badge.danger{

    background:#FEEEEE;

    color:var(--danger);

}

/* ============================================================
   LOADING
============================================================ */

.exam-loading{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px;

}

.exam-spinner{

    width:40px;

    height:40px;

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

    border-top:4px solid var(--primary);

    border-radius:50%;

    animation:spin .8s linear infinite;

}

/* ============================================================
   ANIMATION
============================================================ */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ============================================================
   SCES Design System
   Part 3
   Result Screen / Review / Certificate
============================================================ */

/* ============================================================
   RESULT LAYOUT
============================================================ */

.result-container{

    max-width:1100px;

    margin:40px auto;

    display:flex;

    flex-direction:column;

    gap:30px;

}

.result-header{

    background:var(--surface);

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

    border-radius:var(--radius-lg);

    padding:40px;

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

    text-align:center;

}

.result-header h1{

    font-size:2.2rem;

    margin-bottom:10px;

}

.result-header p{

    font-size:1rem;

}

/* ============================================================
   SCORE CIRCLE
============================================================ */

.result-score{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 0;

}

.score-circle{

    width:260px;

    height:260px;

    border-radius:50%;

    background:#E5E7EB;

    display:flex;

    justify-content:center;

    align-items:center;

    animation:pop .5s ease;

}

.score-circle-inner{

    width:210px;

    height:210px;

    border-radius:50%;

    background:var(--surface);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.score-percent{

    font-size:4rem;

    font-weight:800;

    color:var(--primary);

}

.score-label{

    color:var(--text-light);

    margin-top:6px;

}

/* ============================================================
   PASS / FAIL
============================================================ */

.result-status{

    text-align:center;

    margin-top:20px;

}

.result-status h2{

    font-size:3rem;

    margin-bottom:10px;

}

.result-status.pass h2{

    color:var(--success);

}

.result-status.fail h2{

    color:var(--danger);

}

.result-status p{

    font-size:1.1rem;

}

/* ============================================================
   RESULT GRID
============================================================ */

.result-grid{

    display:grid;

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

    gap:20px;

}

.result-card{

    background:var(--surface);

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

    border-radius:var(--radius-md);

    padding:28px;

    text-align:center;

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

}

.result-card small{

    display:block;

    margin-bottom:10px;

}

.result-card strong{

    font-size:2rem;

    display:block;

}

/* ============================================================
   RANK
============================================================ */

.rank-badge{

    width:110px;

    height:110px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:3rem;

    font-weight:800;

    color:white;

}

.rank-s{

    background:linear-gradient(135deg,#FFD700,#F59E0B);

}

.rank-a{

    background:#22C55E;

}

.rank-b{

    background:#3B82F6;

}

.rank-c{

    background:#6B7280;

}

.rank-d{

    background:#EF4444;

}

/* ============================================================
   REVIEW
============================================================ */

.review-section{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.review-title{

    font-size:1.6rem;

    font-weight:700;

}

.review-card{

    background:var(--surface);

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

    border-radius:var(--radius-md);

    padding:28px;

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

}

.review-question{

    font-size:1.15rem;

    font-weight:700;

    margin-bottom:20px;

}

.review-answer{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:18px;

}

.review-answer span{

    padding:8px 14px;

    border-radius:999px;

    font-weight:700;

}

.answer-user{

    background:#FEE2E2;

    color:#B91C1C;

}

.answer-correct{

    background:#DCFCE7;

    color:#166534;

}

.review-explanation{

    padding:18px;

    border-left:5px solid var(--primary);

    background:#F8FAFC;

    border-radius:8px;

    line-height:1.8;

}

/* ============================================================
   CERTIFICATE
============================================================ */

.certificate{

    margin-top:40px;

    background:linear-gradient(
        135deg,
        #ffffff,
        #f7f9fc
    );

    border:2px solid var(--primary);

    border-radius:20px;

    padding:60px;

    text-align:center;

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

}

.certificate h2{

    font-size:2rem;

    margin-bottom:20px;

}

.certificate-name{

    font-size:2.4rem;

    font-weight:800;

    margin:30px 0;

}

.certificate-grade{

    font-size:1.3rem;

    color:var(--primary);

    font-weight:700;

}

.certificate-footer{

    margin-top:60px;

    display:flex;

    justify-content:space-between;

    font-size:.9rem;

    color:var(--text-light);

}

/* ============================================================
   RESULT BUTTONS
============================================================ */

.result-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin:50px 0;

}

.result-actions .exam-button{

    min-width:220px;

}

/* ============================================================
   CONFETTI
============================================================ */

.confetti{

    position:fixed;

    width:10px;

    height:10px;

    background:#FFD700;

    animation:confettiFall 3s linear forwards;

    pointer-events:none;

    z-index:9999;

}

/* ============================================================
   ANIMATION
============================================================ */

@keyframes pop{

    0%{

        transform:scale(.7);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes confettiFall{

    from{

        transform:translateY(-120px)
        rotate(0deg);

        opacity:1;

    }

    to{

        transform:translateY(110vh)
        rotate(720deg);

        opacity:0;

    }

}

@keyframes successPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}

.pass .score-circle{

    animation:

        pop .5s ease,

        successPulse 1.5s infinite;

}

/* ============================================================
   PRINT
============================================================ */

@media print{

    .exam-navbar,
    .result-actions{

        display:none;

    }

    body{

        background:white;

    }

    .certificate{

        border:3px solid black;

        box-shadow:none;

        page-break-inside:avoid;

    }

}

/* ============================================================
   SCES Design System
   Part 4
   Responsive / Dark Mode / Accessibility / Utilities
============================================================ */

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

@media (max-width:1200px){

    .exam-layout{

        grid-template-columns:220px 1fr;

        gap:20px;

    }

    .result-grid{

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

    }

}

@media (max-width:992px){

    .exam-layout{

        grid-template-columns:1fr;

    }

    .exam-sidebar{

        position:static;

        height:auto;

        width:100%;

    }

    .exam-sidebar__list{

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

    }

    .exam-card__body{

        padding:28px;

    }

    .exam-question{

        font-size:1.3rem;

    }

}

@media (max-width:768px){

    .wrapper{

        width:calc(100% - 24px);

    }

    .exam-navbar__container{

        width:calc(100% - 24px);

    }

    .exam-actions{

        flex-direction:column;

        align-items:stretch;

    }

    .exam-actions__left,
    .exam-actions__right{

        width:100%;

        flex-direction:column;

    }

    .exam-button{

        width:100%;

    }

    .result-grid{

        grid-template-columns:1fr;

    }

    .score-circle{

        width:210px;

        height:210px;

    }

    .score-circle-inner{

        width:165px;

        height:165px;

    }

    .score-percent{

        font-size:3rem;

    }

}

@media (max-width:480px){

    html{

        font-size:15px;

    }

    .exam-sidebar__list{

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

    }

    .exam-card__header{

        padding:20px;

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .exam-card__body{

        padding:20px;

    }

}

/* ============================================================
   SCROLLBAR
============================================================ */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:var(--bg);

}

::-webkit-scrollbar-thumb{

    background:var(--border-dark);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/* ============================================================
   FOCUS
============================================================ */

:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:3px;

}

button:focus-visible,
a:focus-visible,
input:focus-visible{

    border-radius:8px;

}

/* ============================================================
   TRANSITIONS
============================================================ */

a,
button,
input,
label,
.exam-card,
.result-card{

    transition:

        background .25s,

        border-color .25s,

        color .25s,

        transform .25s,

        box-shadow .25s;

}

/* ============================================================
   HOVER EFFECTS
============================================================ */

.result-card:hover,
.exam-card:hover{

    transform:translateY(-4px);

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

}

.exam-sidebar__item:hover{

    transform:translateY(-2px);

}

.exam-button:hover{

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

}

/* ============================================================
   UTILITIES
============================================================ */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mt-4{margin-top:32px;}
.mt-5{margin-top:48px;}

.mb-1{margin-bottom:8px;}
.mb-2{margin-bottom:16px;}
.mb-3{margin-bottom:24px;}
.mb-4{margin-bottom:32px;}
.mb-5{margin-bottom:48px;}

.hidden{

    display:none !important;

}

.w-100{

    width:100%;

}

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.space-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.round{

    border-radius:999px;

}

.shadow{

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

}

/* ============================================================
   STATUS COLORS
============================================================ */

.text-success{

    color:var(--success);

}

.text-danger{

    color:var(--danger);

}

.text-warning{

    color:var(--warning);

}

.bg-success{

    background:var(--success);

    color:white;

}

.bg-danger{

    background:var(--danger);

    color:white;

}

.bg-warning{

    background:var(--warning);

    color:white;

}

/* ============================================================
   DARK MODE ADJUSTMENTS
============================================================ */

body.dark .exam-choice input:checked+label{

    background:rgba(0,91,172,.15);

}

body.dark .review-explanation{

    background:#202833;

}

body.dark .certificate{

    background:#18202A;

}

body.dark .score-circle-inner{

    background:#18202A;

}

body.dark .exam-sidebar__item{

    background:#222C38;

}

body.dark .exam-sidebar__item.answered{

    background:#0E3B67;

    color:white;

}

body.dark .exam-button--secondary{

    background:#222C38;

}

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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* ============================================================
   PRINT SUPPORT
============================================================ */

@page{

    size:A4;

    margin:15mm;

}

@media print{

    body{

        background:white;

        color:black;

    }

    .exam-navbar,
    .exam-sidebar,
    .exam-actions,
    .result-actions{

        display:none !important;

    }

    .exam-layout{

        display:block;

    }

}

/* ============================================================
   VERSION
============================================================ */

/*

SCES Design System

Version 1.0.0

Studio NØSa Camera Examination System

Designed by Studio NØSa

*/