/* Coursecado ExamBook – Frontend styles */
#ccx{ --cc-option-color:#cfe2ff; }

.ccx-container{max-width:900px;margin:40px auto;padding:16px}
.ccx-card{background:#0b1020;color:#e8ecff;border:1px solid #1b2540;border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.35); position:relative;}
.ccx-title{font-size:30px;margin:0 0 8px;color:#e8ecff;font-weight:800;letter-spacing:.3px;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.ccx-sub{opacity:.85;margin:0 0 16px}
label{display:block;margin:12px 0}
#ccx input[type=text], #ccx input[type=password]{width:100%;padding:12px;border-radius:12px;border:1px solid #273055;background:#0e1530;color:#cfe2ff}
#ccx input::placeholder{color:#7f8bb4}
.ccx-btn{background:#6b9cff;border:none;padding:12px 18px;border-radius:999px;font-weight:700;cursor:pointer;transition:transform .2s}
.ccx-btn:hover{transform:translateY(-2px)}
.ccx-btn.ghost{background:transparent;border:1px solid #6b9cff}
.ccx-login .ccx-btn{margin-top:12px}
.ccx-note{opacity:.75;margin-top:10px}

/* Inline anchored messages under buttons */
.ccx-inline-msg{display:inline-block;margin-top:8px;background:#22305b;color:#fff;padding:8px 12px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.3);font-size:14px}
.ccx-inline-msg.danger{background:#b00020}

/* Centered preloaders */
.ccx-preloader{display:none; min-height:360px; width:100%;}
.ccx-preloader.on{display:grid !important; place-items:center !important; min-height:360px !important; width:100%;
  background:radial-gradient(1200px 400px at 50% 0%, #1b2448 0%, #0b1020 60%); color:#cfe2ff;border-radius:16px;margin:20px 0;text-align:center}
.ccx-prewrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.ccx-loader{width:72px;height:72px;border-radius:50%;border:6px solid #22305b;border-top-color:#6b9cff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ccx-txt{font-size:18px;letter-spacing:.3px}
.ccx-instructions ul{line-height:1.8}
.ccx-instructions h1,.ccx-instructions h2,.ccx-instructions h3,.ccx-instructions h4{color:#e8ecff;font-weight:800;letter-spacing:.2px}
.ccx-instructions p,.ccx-instructions li{color:#dbe6ff}
.ccx-webcam video{width:100%;max-height:360px;border-radius:12px;background:#000;margin-bottom:12px}
.ccx-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:9999}
.ccx-modal-inner{background:#0b1020;border:1px solid #1b2540;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.35);padding:24px;max-width:520px;color:#e8ecff}
.ccx-pill{display:inline-block;background:#101a3a;border:1px solid #22305b;padding:6px 10px;border-radius:999px;margin-right:8px}
.ccx-q{margin:16px 0;padding:16px;border:1px solid #1b2540;border-radius:12px;background:#0e1530}
.ccx-timer{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px;flex-wrap:wrap}
.ccx-timebox{font-variant-numeric:tabular-nums}
#ccx-exam .ccx-q label{ color: var(--cc-option-color); }

/* Exam pager */
.ccx-pager{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.ccx-page-ind{opacity:.85}
.ccx-navbtns{display:flex;gap:8px;flex-wrap:wrap}

/* Student typing color */
.ccx-input, .ccx-text{color:#cfe2ff}
.ccx-input.has-val, .ccx-text.has-val{color:#0c4ab9; font-weight:600}

/* Full-screen thanks */
.ccx-full{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:10000;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1b2448 0%, #0b1020 60%),
    linear-gradient(180deg,#0b1020 0%, #080c1b 100%);
  color:#e8ecff; text-align:center; padding:24px}
.ccx-full-inner{max-width:720px}
.ccx-brand{font-weight:900;font-size:42px;letter-spacing:8px;margin-bottom:10px}
.ccx-thanks-title{font-size:24px;margin:8px 0 6px}
.ccx-thanks-sub{opacity:.9;margin:0 0 14px}
.ccx-refresh-note{opacity:.7;font-size:14px}

/* Fullscreen after login */
#ccx.ccx-fullscreen{max-width:100vw; width:100vw; min-height:100vh; padding:24px}
#ccx.ccx-fullscreen .ccx-card{min-height:calc(100vh - 120px)}
body.ccx-no-scroll{overflow:hidden}

/* Mobile */
@media (max-width:640px){
  .ccx-container{padding:8px}
  .ccx-btn{width:100%}
  .ccx-title{font-size:26px}
  .ccx-card{padding:18px}
}


/* v1.6.4 – responsive polish */
.ccx-container{width:min(1100px, 92vw); margin:clamp(12px, 5vh, 40px) auto; padding:clamp(8px, 2vw, 16px); padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}
.ccx-card{box-sizing:border-box; padding:clamp(16px, 3vw, 24px)}
.ccx-preloader.on{min-height:clamp(220px, 55dvh, 480px) !important}
#ccx.ccx-fullscreen{min-height:100dvh}
#ccx.ccx-fullscreen .ccx-card{min-height:unset}
#ccx.ccx-fullscreen .ccx-instructions{min-height:clamp(260px, 60dvh, 720px)}
.ccx-instructions{max-width:min(100%, 1100px); margin:0 auto}
.ccx-instructions h3{margin-top:0; font-size:clamp(18px, 2.6vw, 22px)}
.ccx-instructions p, .ccx-instructions li{font-size:clamp(14px, 2.2vw, 16px); line-height:1.7}
.ccx-pill{font-size:clamp(12px, 2vw, 14px); padding:6px 10px}
.ccx-loader{width:clamp(48px, 8vw, 72px); height:clamp(48px, 8vw, 72px); border-width:clamp(4px, .9vw, 6px)}
.ccx-txt{font-size:clamp(16px, 2.6vw, 18px)}
.ccx-webcam video{max-height:50dvh}
@media (max-width:480px){
  .ccx-title{font-size:24px}
  .ccx-container{margin:clamp(8px, 3vh, 16px) auto}
  .ccx-pager{flex-direction:column; align-items:stretch}
  .ccx-navbtns{justify-content:space-between}
}


/* --- Enhancements: scrolling & responsiveness --- */
body.ccx-no-scroll{ overflow:hidden; touch-action:none; }
#ccx, #ccx * { box-sizing:border-box; }
#ccx .ccx-scroll, #ccx .ccx-instructions, #ccx .ccx-exam-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; }
#ccx .ccx-image-viewer{ max-height:min(80vh, 80dvh); overflow:auto; }
#ccx.ccx-fullscreen{ height:100dvh; }
@media (max-width: 768px){
  .ccx-container{ max-width: 100%; padding: 12px; }
  .ccx-card{ margin: 0; border-radius: 16px; }
  #ccx .ccx-grid{ display:block; }
}