/* ============================================================
   styles.css — RCI VARANASI | O Level Python (M3-R5.1)
   Mobile-first, clean, professional
   ============================================================ */

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

:root{
    --primary:#1a7f64;
    --primary-dark:#145f4c;
    --secondary:#2c3e50;
    --success:#27ae60;
    --danger:#e74c3c;
    --warning:#f39c12;
    --bg:#f0f3f7;
    --card:#ffffff;
    --border:#dce0e6;
    --code-bg:#1e2a38;
    --code-text:#e8f1f8;
    --radius:12px;
    --shadow:0 4px 18px rgba(0,0,0,.10);
}

body{
    font-family:'Segoe UI',Roboto,'Noto Sans',Arial,sans-serif;
    background:var(--bg);
    color:#2c3e50;
    min-height:100vh;
    font-size:15px;
}

/* ===== HEADER ===== */
header{
    background:linear-gradient(135deg,#1a2f4c 0%,#1a7f64 100%);
    color:#fff;
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    position:sticky;
    top:0;
    z-index:200;
    box-shadow:0 3px 14px rgba(0,0,0,.25);
    flex-wrap:wrap;
}
.header-left{ display:flex; align-items:center; gap:10px; }
.institute-logo{
    background:#FFD700;
    color:#1a2f4c;
    font-size:17px;
    font-weight:900;
    width:44px; height:44px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    letter-spacing:-.5px;
}
.institute-name{ font-size:16px; font-weight:800; color:#FFD700; letter-spacing:.5px; }
.institute-sub{ font-size:11px; opacity:.8; margin-top:1px; }
.header-right{ text-align:right; }
.exam-badge{
    display:inline-block;
    background:rgba(255,255,255,.2);
    padding:3px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:2px;
}
.exam-title{ font-size:12px; opacity:.85; }

/* ===== SECTIONS ===== */
.section{ display:none; padding:20px 0 50px; min-height:calc(100vh - 60px); }
.container{ max-width:860px; margin:0 auto; padding:0 14px; }

/* ===== REGISTRATION ===== */
.reg-card{
    max-width:480px;
    margin:0 auto;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
}
.reg-header{
    background:linear-gradient(135deg,#1a2f4c 0%,#1a7f64 100%);
    color:#fff;
    padding:28px 24px 22px;
    text-align:center;
}
.reg-logo{ font-size:40px; margin-bottom:8px; }
.reg-header h2{ font-size:20px; margin-bottom:6px; }
.reg-header p{ font-size:13px; opacity:.8; }
.reg-card form{ padding:24px 22px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:13px; font-weight:700; color:#2c3e50; margin-bottom:6px; }
.form-group input,
.form-group select,
.set-select{
    width:100%;
    padding:12px 14px;
    border:2px solid var(--border);
    border-radius:8px;
    font-size:14px;
    outline:none;
    background:#f8f9fb;
    transition:border-color .2s;
}
.form-group input:focus,
.set-select:focus{ border-color:var(--primary); background:#fff; }
.set-info-box{
    margin-top:10px;
    background:#e8f8f0;
    border:1px solid #b2dfce;
    border-radius:8px;
    padding:10px 14px;
    font-size:13px;
    line-height:1.6;
    color:#1a5c44;
}
.chapter-tag{
    display:inline-block;
    background:#1a7f64;
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:2px 9px;
    border-radius:10px;
    margin-right:5px;
    margin-top:4px;
}

/* ===== INSTRUCTIONS ===== */
.instr-card{
    background:var(--card);
    border-radius:var(--radius);
    padding:24px 20px;
    box-shadow:var(--shadow);
    max-width:600px;
    margin:0 auto;
}
.instr-card h2{ color:var(--primary); font-size:19px; margin-bottom:10px; }
.selected-set-pill{
    display:none;
    background:#e8f8f0;
    color:#1a5c44;
    border:1px solid #b2dfce;
    border-radius:20px;
    padding:5px 14px;
    font-size:13px;
    font-weight:600;
    margin-bottom:14px;
}
.instr-list{ list-style:none; padding:0; margin:14px 0; }
.instr-list li{
    display:flex;
    gap:10px;
    padding:9px 0;
    border-bottom:1px solid var(--border);
    font-size:14px;
    line-height:1.5;
    align-items:flex-start;
}
.instr-icon{ font-size:18px; flex-shrink:0; width:24px; text-align:center; }

/* ===== BUTTONS ===== */
.btn{
    display:inline-block;
    padding:12px 20px;
    border:none;
    border-radius:8px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:all .2s;
    text-align:center;
}
.btn:active{ transform:scale(.97); }
.btn-full{ width:100%; display:block; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-dark); }
.btn-success{ background:var(--success); color:#fff; }
.btn-success:hover{ background:#219a52; }
.btn-secondary{ background:#95a5a6; color:#fff; }
.btn-secondary:hover{ background:#7f8c8d; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:#c0392b; }

/* ===== TIMER BAR ===== */
.timer-bar{
    background:#1a2f4c;
    color:#fff;
    padding:8px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px;
    position:sticky;
    top:60px;
    z-index:99;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.timer-left{ display:flex; align-items:center; gap:8px; font-size:12px; opacity:.85; }
.inst-badge{
    background:rgba(255,215,0,.2);
    color:#FFD700;
    font-size:11px;
    font-weight:700;
    padding:2px 8px;
    border-radius:10px;
}
.timer-center{ font-size:12px; font-weight:600; opacity:.7; }
.timer-right{}
.timer{
    font-size:16px;
    font-weight:800;
    background:rgba(255,255,255,.12);
    padding:5px 14px;
    border-radius:20px;
    letter-spacing:.5px;
}
.timer.warning{ background:rgba(243,156,18,.3); color:#FFD700; animation:pulse 1s infinite; }
.timer.danger{  background:rgba(231,76,60,.35);  color:#ff7070; animation:pulse .5s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* ===== QUESTION NAV ===== */
.question-nav{
    display:flex;
    gap:8px;
    margin:14px 0;
    flex-wrap:wrap;
}
.nav-btn{
    flex:1;
    min-width:80px;
    padding:10px 6px;
    background:#fff;
    border:2px solid var(--border);
    border-radius:8px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:all .2s;
    color:#2c3e50;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}
.nav-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.nav-btn.answered{ background:#e8f8f0; border-color:var(--success); color:var(--success); }
.nav-btn.active.answered{ background:var(--success); color:#fff; border-color:var(--success); }
.nav-marks{
    background:rgba(255,255,255,.25);
    font-size:10px;
    padding:1px 7px;
    border-radius:10px;
    font-weight:600;
}
.nav-opt{
    background:rgba(243,156,18,.25);
    color:#f39c12;
    font-size:10px;
    padding:1px 7px;
    border-radius:10px;
}
.nav-btn.active .nav-marks,
.nav-btn.active .nav-opt{ background:rgba(255,255,255,.3); color:#fff; }

/* ===== QUESTION IMAGE BOX ===== */
.question{ display:none; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:14px; }

.question-img-box{
    background:linear-gradient(135deg,#1a7f64 0%,#145f4c 100%);
    color:#fff;
    padding:18px 18px 16px;
}
.question-img-header{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    flex-wrap:wrap;
}
.q-badge{
    background:rgba(255,255,255,.22);
    font-size:15px; font-weight:800;
    padding:4px 14px; border-radius:20px;
    letter-spacing:.4px;
}
.q-compulsory{
    background:rgba(255,255,255,.12);
    color:#ffe08a;
    font-size:12px; font-weight:700;
    padding:3px 10px; border-radius:12px;
    border:1px solid rgba(255,224,0,.3);
}
.q-optional{ color:#b2f0e8; border-color:rgba(178,240,232,.4); }
.q-marks{
    margin-left:auto;
    background:rgba(255,255,255,.18);
    font-size:13px; font-weight:700;
    padding:4px 12px; border-radius:20px;
}
.q-chapter-tag{
    background:#FFD700;
    color:#1a2f4c;
    font-size:11px; font-weight:800;
    padding:3px 10px; border-radius:10px;
    letter-spacing:.3px;
}
.lang-toggle{ display:flex; gap:8px; margin-bottom:12px; }
.lang-btn{
    padding:5px 14px;
    border:2px solid rgba(255,255,255,.5);
    border-radius:20px;
    background:transparent;
    color:rgba(255,255,255,.8);
    font-size:12px; font-weight:600;
    cursor:pointer;
    transition:all .2s;
}
.lang-btn.active{ background:#fff; color:var(--primary); border-color:#fff; }
.question-text{ font-size:15px; line-height:1.75; color:#fff; }
.question-text br{ display:block; content:''; margin-top:4px; }
.lang-content ul{ padding-left:20px; margin-top:6px; }
.lang-content li{ margin-bottom:4px; font-size:14px; }
.lang-content strong{ color:#ffe08a; }

/* ===== EDITOR IO ROW ===== */
.editor-io-row{
    display:flex;
    gap:0;
    background:#f0f3f7;
    border-top:3px solid var(--primary);
    min-height:320px;
}
.editor-col{
    flex:1.45;
    display:flex;
    flex-direction:column;
    padding:14px 12px 14px 14px;
    border-right:2px solid var(--border);
    background:#1a2534;
    min-width:0;
}
.io-col{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:14px 14px 14px 12px;
    background:#f0f3f7;
    min-width:0;
}
.col-label{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
    margin-bottom:7px;
    color:#7fa8c8;
}
.io-col .col-label{ color:#7f8c8d; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-green{ background:#27ae60; }
.dot-yellow{ background:#f39c12; }
.dot-teal{ background:#1a7f64; }

.code-editor{
    flex:1;
    width:100%;
    min-height:190px;
    background:#0d1b2a;
    color:#e8f1f8;
    font-family:'Courier New','Monaco',monospace;
    font-size:13px;
    line-height:1.65;
    padding:12px;
    border:1px solid #2a3f54;
    border-radius:6px;
    resize:vertical;
    outline:none;
    tab-size:4;
}
.code-editor::placeholder{ color:#4a6a84; font-style:italic; }

.editor-buttons{ display:flex; gap:8px; margin-top:10px; }
.run-btn{ flex:2; font-size:14px; font-weight:700; padding:10px; }
.editor-buttons .btn-secondary{ flex:1; font-size:13px; padding:10px; }

.input-area{
    width:100%;
    height:75px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:6px;
    padding:8px 10px;
    font-size:13px;
    font-family:monospace;
    resize:vertical;
    outline:none;
    color:#2c3e50;
}
.input-area:focus{ border-color:var(--primary); }

.output-area{
    flex:1;
    background:#0d1b2a;
    color:#7fffd4;
    font-family:'Courier New',monospace;
    font-size:12px;
    padding:10px 12px;
    border-radius:6px;
    min-height:105px;
    white-space:pre-wrap;
    word-break:break-word;
    line-height:1.55;
    border:1px solid #1e3448;
    overflow-y:auto;
}
.output-area.error{ color:#ff6b6b; }
.output-area.running{ color:#FFD700; }

.submit-btn{ display:block; width:calc(100% - 28px); margin:14px; padding:13px; font-size:15px; }
#finish-test-btn{ display:block; width:100%; margin-top:18px; padding:14px; font-size:15px; }

/* ===== RESULTS ===== */
.result-hero{
    background:linear-gradient(135deg,#1a2f4c 0%,#1a7f64 100%);
    color:#fff;
    border-radius:var(--radius);
    padding:22px 20px;
    margin-bottom:14px;
    box-shadow:var(--shadow);
    text-align:center;
}
.result-institute{ font-size:13px; font-weight:700; color:#FFD700; margin-bottom:6px; letter-spacing:.5px; }
.result-hero h2{ font-size:20px; margin-bottom:14px; }
.result-meta-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    text-align:left;
}
.meta-item{
    background:rgba(255,255,255,.12);
    border-radius:8px;
    padding:8px 12px;
}
.meta-label{ font-size:11px; opacity:.75; display:block; margin-bottom:2px; }
.meta-value{ font-size:14px; font-weight:700; word-break:break-all; }

.score-card{
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
    color:#fff;
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:14px;
    box-shadow:var(--shadow);
}
.score-card h3{ font-size:15px; opacity:.9; margin-bottom:14px; }
.score-row{ display:flex; gap:12px; }
.score-box{
    flex:1;
    background:rgba(255,255,255,.15);
    border-radius:10px;
    padding:14px 10px;
    text-align:center;
}
.score-label{ font-size:11px; opacity:.8; margin-bottom:6px; }
.score-big{ font-size:28px; font-weight:900; }
.grade-big{ font-size:26px; font-weight:900; }
.status-big{ font-size:16px; font-weight:800; }

.result-card{
    background:var(--card);
    border-radius:var(--radius);
    margin-bottom:14px;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.result-card-header{
    padding:14px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}
.result-card-header.pass        { background:linear-gradient(135deg,var(--success) 0%,#219a52 100%); color:#fff; }
.result-card-header.fail        { background:linear-gradient(135deg,var(--danger) 0%,#c0392b 100%);  color:#fff; }
.result-card-header.not-attempted{ background:linear-gradient(135deg,#95a5a6 0%,#7f8c8d 100%);       color:#fff; }
.result-card-header h4{ font-size:14px; }
.result-card-header small{ font-size:12px; opacity:.8; }
.result-marks{
    background:rgba(255,255,255,.25);
    padding:5px 14px;
    border-radius:20px;
    font-size:15px;
    font-weight:800;
    white-space:nowrap;
}
.result-body{ padding:16px; }
.result-section-title{
    font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:.5px;
    color:#7f8c8d;
    margin:12px 0 6px;
}
.result-code{
    background:var(--code-bg); color:var(--code-text);
    font-family:'Courier New',monospace; font-size:12px;
    padding:12px; border-radius:6px;
    white-space:pre-wrap; word-break:break-word; line-height:1.55;
    border-left:3px solid var(--primary);
    overflow-x:auto;
}
.result-code.correct{ border-left-color:var(--success); }
.result-output{
    background:#0d1b2a; color:#7fffd4;
    font-family:'Courier New',monospace; font-size:12px;
    padding:10px 12px; border-radius:6px;
    white-space:pre-wrap; word-break:break-word; line-height:1.55;
}

.action-buttons{ display:flex; flex-direction:column; gap:10px; margin-top:20px; padding-bottom:40px; }
.action-buttons .btn{ width:100%; padding:14px; font-size:15px; }

/* ===== MOBILE: stack editor / IO ===== */
@media (max-width:640px){
    .editor-io-row{ flex-direction:column; min-height:unset; }
    .editor-col{ border-right:none; border-bottom:2px solid var(--border); padding:12px; }
    .io-col{ padding:12px; }
    .result-meta-grid{ grid-template-columns:1fr; }
    .score-row{ flex-direction:column; }
}

/* ===== DESKTOP ===== */
@media (min-width:641px){
    .action-buttons{ flex-direction:row; }
    .code-editor{ min-height:220px; }
}
@media (min-width:800px){
    .container{ padding:0 20px; }
    .code-editor{ min-height:260px; }
}

/* ===== PRINT ===== */
@media print{
    header,.timer-bar,.action-buttons,.editor-buttons,
    .submit-btn,#finish-test-btn,.question-nav{ display:none !important; }
    body{ background:#fff; }
    #results-section{ display:block !important; }
    #registration-section,#instructions-section,#test-section{ display:none !important; }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:3px; }