/**
 * NaijaExamPro — Frontend Stylesheet
 * All rules scoped inside .nep-app-wrapper so NOTHING leaks into your theme.
 * Compatible: Elementor, Divi, Avada, Astra, GeneratePress, OceanWP, Kadence,
 *             Blocksy, Neve, Storefront, Twenty-series, ALL WordPress themes.
 * @package NaijaExamPro
 * @version 2.1.0
 */

/* ── CSS custom properties ────────────────────────────────────────────────── */
.nep-app-wrapper {
	--nep-primary:   #00D4AA;
	--nep-accent:    #00B4D8;
	--nep-purple:    #A78BFA;
	--nep-orange:    #FF6B35;
	--nep-yellow:    #F7B731;
	--nep-green:     #34D399;
	--nep-red:       #FF4757;
	--nep-pink:      #F472B6;

	--nep-bg:        #06101A;
	--nep-card:      #0C1824;
	--nep-input:     #060F1A;
	--nep-border:    #1E2D3D;
	--nep-border2:   #2E3D4D;
	--nep-text:      #E8F4F8;
	--nep-muted:     #7A8FA6;
	--nep-dim:       #3A4D5D;

	--nep-r:         8px;
	--nep-r-lg:      12px;
	--nep-r-xl:      16px;
	--nep-font:      'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--nep-mono:      'Courier New', Courier, monospace;
}

/* Light mode */
.nep-app-wrapper.nep-light {
	--nep-bg:     #F0F4F8;
	--nep-card:   #FFFFFF;
	--nep-input:  #F8FAFC;
	--nep-border: #DDE3EB;
	--nep-text:   #1A2535;
	--nep-muted:  #5A6B7E;
	--nep-dim:    #96A4B2;
}

/* ── Scoped reset ─────────────────────────────────────────────────────────── */
.nep-app-wrapper *, .nep-app-wrapper *::before, .nep-app-wrapper *::after {
	box-sizing: border-box; margin: 0; padding: 0;
}
.nep-app-wrapper {
	font-family: var(--nep-font);
	background:  var(--nep-bg);
	color:       var(--nep-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	min-height: 500px;
	isolation: isolate;
	position: relative;
}
.nep-app-wrapper a       { color: var(--nep-primary); text-decoration: none; }
.nep-app-wrapper a:hover { text-decoration: underline; }
.nep-app-wrapper img     { max-width: 100%; height: auto; display: block; }
.nep-app-wrapper select option { background: var(--nep-input); color: var(--nep-text); }
.nep-app-wrapper ::-webkit-scrollbar       { width: 4px; height: 4px; }
.nep-app-wrapper ::-webkit-scrollbar-track { background: var(--nep-input); }
.nep-app-wrapper ::-webkit-scrollbar-thumb { background: var(--nep-border); border-radius: 2px; }

/* ── Animations ─────────────────────────────────────────────────────────────*/
@keyframes nep-spin     { to { transform: rotate(360deg); } }
@keyframes nep-pulse    { 0%,100%{opacity:1}50%{opacity:.2} }
@keyframes nep-fade-up  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes nep-slide-in { from{transform:translateX(100%)} to{transform:translateX(0)} }

/* ── Layout ─────────────────────────────────────────────────────────────────*/
.nep-container { max-width:1200px; margin:0 auto; padding:0 16px; }
.nep-section   { padding:36px 0; }
.nep-grid-2    { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.nep-grid-3    { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.nep-grid-4    { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.nep-grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.nep-flex      { display:flex; align-items:center; }
.nep-gap-8     { gap:8px; }
.nep-gap-12    { gap:12px; }
.nep-mt-8      { margin-top:8px; }
.nep-mt-12     { margin-top:12px; }
.nep-mt-16     { margin-top:16px; }
.nep-mb-8      { margin-bottom:8px; }
.nep-mb-12     { margin-bottom:12px; }
.nep-mb-16     { margin-bottom:16px; }
.nep-mb-24     { margin-bottom:24px; }
.nep-center    { text-align:center; }
.nep-truncate  { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Navigation bar ─────────────────────────────────────────────────────────*/
.nep-nav {
	background: var(--nep-card);
	border-bottom: 1px solid var(--nep-border);
	padding: 0 16px;
	position: sticky;
	top: 0;
	z-index: 200;
}
.nep-nav__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 58px;
	gap: 10px;
}
.nep-nav__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	text-decoration: none !important;
}
.nep-nav__logo {
	width: 36px; height: 36px;
	background: linear-gradient(135deg, var(--nep-primary), var(--nep-accent));
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; flex-shrink: 0;
}
.nep-nav__name    { color:var(--nep-text); font-weight:900; font-size:15px; letter-spacing:-.3px; line-height:1; }
.nep-nav__tag     { color:var(--nep-primary); font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.nep-nav__links   { display:flex; gap:2px; overflow-x:auto; flex:1; scrollbar-width:none; }
.nep-nav__links::-webkit-scrollbar { display:none; }
.nep-nav__link {
	padding: 7px 11px;
	border-radius: var(--nep-r);
	border: none;
	cursor: pointer;
	background: transparent;
	color: var(--nep-muted);
	font-size: 12px;
	font-weight: 600;
	font-family: var(--nep-font);
	display: flex; align-items: center; gap: 5px;
	transition: all .15s;
	white-space: nowrap;
	flex-shrink: 0;
	text-decoration: none !important;
}
.nep-nav__link:hover           { background:var(--nep-border); color:var(--nep-text); }
.nep-nav__link.nep-active      { background:var(--nep-border); color:var(--nep-primary); }
.nep-nav__actions              { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.nep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: var(--nep-r);
	border: none;
	cursor: pointer;
	font-family: var(--nep-font);
	font-size: 13px;
	font-weight: 700;
	transition: all .15s;
	white-space: nowrap;
	text-decoration: none !important;
}
.nep-btn:focus-visible { outline:2px solid var(--nep-primary); outline-offset:2px; }
.nep-btn:disabled      { opacity:.4; cursor:not-allowed !important; }
.nep-btn-primary   { background:linear-gradient(135deg,var(--nep-primary),var(--nep-accent)); color:#0A1628; }
.nep-btn-primary:hover  { filter:brightness(1.1); transform:translateY(-1px); }
.nep-btn-secondary { background:var(--nep-border); color:var(--nep-text); border:1px solid var(--nep-border2); }
.nep-btn-secondary:hover{ background:var(--nep-border2); }
.nep-btn-danger    { background:rgba(255,71,87,.15); color:var(--nep-red); }
.nep-btn-danger:hover   { background:rgba(255,71,87,.25); }
.nep-btn-ai        { background:linear-gradient(135deg,var(--nep-yellow),var(--nep-orange)); color:#0A1628; }
.nep-btn-ai:hover  { filter:brightness(1.08); }
.nep-btn-sm        { padding:5px 12px; font-size:11px; }
.nep-btn-lg        { padding:13px 28px; font-size:15px; }
.nep-btn-full      { width:100%; }
.nep-btn-icon      { width:34px; height:34px; padding:0; border-radius:var(--nep-r); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.nep-card {
	background: var(--nep-card);
	border: 1px solid var(--nep-border);
	border-radius: var(--nep-r-lg);
}
.nep-card-body   { padding:20px; }
.nep-card-header { padding:14px 20px; border-bottom:1px solid var(--nep-border); }
.nep-card-footer { padding:14px 20px; border-top:1px solid var(--nep-border); }
.nep-card--primary  { border-color:rgba(0,212,170,.35); }
.nep-card--purple   { border-color:rgba(167,139,250,.35); }
.nep-card--orange   { border-color:rgba(255,107,53,.35); }

/* ── KPI cards ──────────────────────────────────────────────────────────── */
.nep-kpi               { background:var(--nep-card); border:1px solid var(--nep-border); border-radius:var(--nep-r-lg); padding:18px; }
.nep-kpi__label        { color:var(--nep-muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.nep-kpi__value        { font-size:24px; font-weight:800; line-height:1; }
.nep-kpi__delta        { font-size:11px; margin-top:4px; color:var(--nep-primary); }

/* ── Form elements ───────────────────────────────────────────────────────── */
.nep-field  { margin-bottom:14px; }
.nep-label  { display:block; color:var(--nep-muted); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:5px; }
.nep-input, .nep-select, .nep-textarea {
	width:100%; background:var(--nep-input); border:1px solid var(--nep-border);
	border-radius:var(--nep-r); color:var(--nep-text); font-family:var(--nep-font);
	font-size:13px; padding:9px 12px; transition:border-color .15s; outline:none;
	-webkit-appearance:none; appearance:none;
}
.nep-input:focus, .nep-select:focus, .nep-textarea:focus { border-color:var(--nep-primary); box-shadow:0 0 0 3px rgba(0,212,170,.12); }
.nep-input::placeholder, .nep-textarea::placeholder { color:var(--nep-dim); }
.nep-textarea { resize:vertical; min-height:80px; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.nep-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:700; }
.nep-badge-primary { background:rgba(0,212,170,.15);  color:var(--nep-primary); }
.nep-badge-purple  { background:rgba(167,139,250,.15);color:var(--nep-purple); }
.nep-badge-yellow  { background:rgba(247,183,49,.15); color:var(--nep-yellow); }
.nep-badge-orange  { background:rgba(255,107,53,.15); color:var(--nep-orange); }
.nep-badge-red     { background:rgba(255,71,87,.15);  color:var(--nep-red); }
.nep-badge-green   { background:rgba(52,211,153,.15); color:var(--nep-green); }
.nep-badge-dim     { background:var(--nep-border);    color:var(--nep-muted); }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.nep-progress      { height:4px; background:var(--nep-border); border-radius:2px; overflow:hidden; }
.nep-progress-fill { height:100%; border-radius:2px; transition:width .5s ease; }
.nep-progress--primary { background:linear-gradient(90deg,var(--nep-primary),var(--nep-accent)); }
.nep-progress--sm  { height:3px; }
.nep-progress--lg  { height:8px; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.nep-tabs { display:flex; gap:3px; background:var(--nep-input); border-radius:var(--nep-r); padding:4px; border:1px solid var(--nep-border); flex-wrap:wrap; }
.nep-tab  { padding:7px 14px; border-radius:6px; border:none; cursor:pointer; font-weight:600; font-size:12px; font-family:var(--nep-font); background:transparent; color:var(--nep-muted); transition:all .2s; white-space:nowrap; }
.nep-tab.nep-active { background:var(--nep-border); color:var(--nep-text); }

/* ── Modal / Overlay ─────────────────────────────────────────────────────── */
.nep-overlay { position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:99999; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(5px); padding:16px; animation:nep-fade-up .2s ease; }
.nep-modal   { background:var(--nep-card); border-radius:var(--nep-r-xl); display:flex; flex-direction:column; overflow:hidden; max-height:90vh; width:min(680px,100%); box-shadow:0 24px 80px rgba(0,0,0,.5); }
.nep-modal--sm  { width:min(480px,100%); }
.nep-modal__header { padding:16px 20px 14px; border-bottom:1px solid var(--nep-border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.nep-modal__body   { flex:1; overflow-y:auto; padding:18px 20px; }
.nep-modal__footer { padding:14px 20px; border-top:1px solid var(--nep-border); display:flex; gap:10px; justify-content:flex-end; flex-shrink:0; }
.nep-modal__title  { color:var(--nep-text); font-size:15px; font-weight:700; }
.nep-modal__sub    { color:var(--nep-muted); font-size:11px; margin-top:2px; }
.nep-modal__close  { width:30px; height:30px; background:var(--nep-border); border:none; border-radius:7px; color:var(--nep-muted); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; }
.nep-modal__close:hover { background:var(--nep-border2); }

/* Slide-in notification drawer */
.nep-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:99999; display:flex; justify-content:flex-end; }
.nep-drawer         { background:var(--nep-card); width:min(380px,100vw); height:100vh; border-left:1px solid var(--nep-border); display:flex; flex-direction:column; animation:nep-slide-in .25s ease; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.nep-spinner    { display:inline-block; width:18px; height:18px; border:2px solid rgba(0,212,170,.25); border-top-color:var(--nep-primary); border-radius:50%; animation:nep-spin .8s linear infinite; }
.nep-spinner-sm { width:14px; height:14px; }
.nep-spinner-lg { width:28px; height:28px; border-width:3px; }
.nep-loading    { display:flex; align-items:center; gap:10px; color:var(--nep-primary); font-size:13px; padding:16px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.nep-hero       { text-align:center; max-width:720px; margin:50px auto 52px; padding:0 16px; }
.nep-hero__eye  { display:inline-flex; align-items:center; gap:8px; background:rgba(0,212,170,.1); border:1px solid rgba(0,212,170,.3); border-radius:20px; padding:5px 14px; margin-bottom:22px; color:var(--nep-primary); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.nep-hero__dot  { width:6px; height:6px; border-radius:50%; background:var(--nep-primary); animation:nep-pulse 1.8s infinite; }
.nep-hero__h1   { font-size:clamp(24px,5.5vw,54px); font-weight:900; line-height:1.1; margin-bottom:18px; letter-spacing:-1.5px; }
.nep-hero__grad { background:linear-gradient(125deg,var(--nep-primary),var(--nep-accent) 45%,var(--nep-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nep-hero__sub  { color:var(--nep-muted); font-size:15px; line-height:1.75; max-width:560px; margin:0 auto 28px; }
.nep-hero__cta  { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── CBT exam engine ─────────────────────────────────────────────────────── */
.nep-cbt              { min-height:100vh; background:var(--nep-bg); display:flex; flex-direction:column; }
.nep-cbt__header      { background:var(--nep-card); border-bottom:1px solid var(--nep-border); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; gap:10px; flex-wrap:wrap; }
.nep-cbt__body        { flex:1; display:flex; max-width:1100px; margin:0 auto; width:100%; padding:20px 12px; gap:16px; }
.nep-cbt__main        { flex:1; min-width:0; }
.nep-cbt__sidebar     { width:190px; flex-shrink:0; }
.nep-cbt__nav         { display:flex; justify-content:space-between; margin-top:8px; }
.nep-cbt__prog-bar    { height:3px; background:var(--nep-border); flex-shrink:0; }

.nep-timer            { background:var(--nep-input); border:1px solid var(--nep-border); border-radius:var(--nep-r); padding:5px 14px; color:var(--nep-text); font-family:var(--nep-mono); font-size:17px; font-weight:700; letter-spacing:1.5px; transition:all .3s; }
.nep-timer--warn      { border-color:var(--nep-red); color:var(--nep-red); background:rgba(255,71,87,.08); }

.nep-qcard            { background:var(--nep-card); border-radius:var(--nep-r-lg); padding:22px; border:1px solid var(--nep-border); margin-bottom:14px; }
.nep-qcard__meta      { display:flex; gap:6px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:14px; }
.nep-qcard__text      { color:var(--nep-text); font-size:15px; line-height:1.75; margin-bottom:22px; }
.nep-qcard__img       { width:100%; max-height:260px; object-fit:contain; border-radius:var(--nep-r); margin-bottom:14px; border:1px solid var(--nep-border); }

.nep-options          { display:flex; flex-direction:column; gap:9px; }
.nep-option           { padding:13px 16px; border-radius:var(--nep-r); border:2px solid var(--nep-border); background:var(--nep-input); color:var(--nep-text); text-align:left; cursor:pointer; font-size:14px; font-family:var(--nep-font); font-weight:400; transition:all .15s; display:flex; align-items:center; gap:12px; width:100%; }
.nep-option:hover     { border-color:var(--nep-border2); background:var(--nep-border); }
.nep-option.nep-sel   { border-color:var(--nep-primary); background:rgba(0,212,170,.1); color:var(--nep-primary); font-weight:700; }
.nep-option.nep-right { border-color:var(--nep-green); background:rgba(52,211,153,.1); color:var(--nep-green); }
.nep-option.nep-wrong { border-color:var(--nep-red); background:rgba(255,71,87,.1); color:var(--nep-red); }
.nep-opt-letter       { width:26px; height:26px; border-radius:50%; border:2px solid var(--nep-border2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; background:transparent; color:var(--nep-muted); transition:all .15s; }
.nep-option.nep-sel   .nep-opt-letter { background:var(--nep-primary); border-color:var(--nep-primary); color:#0A1628; }
.nep-option.nep-right .nep-opt-letter { background:var(--nep-green); border-color:var(--nep-green); color:#0A1628; }
.nep-option.nep-wrong .nep-opt-letter { background:var(--nep-red); border-color:var(--nep-red); color:#fff; }

/* Question map sidebar */
.nep-qmap             { background:var(--nep-card); border-radius:var(--nep-r-lg); padding:14px; border:1px solid var(--nep-border); position:sticky; top:72px; }
.nep-qmap__grid       { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-bottom:12px; }
.nep-qmap__btn        { aspect-ratio:1; border-radius:5px; border:1px solid var(--nep-border); cursor:pointer; font-size:9px; font-weight:700; background:var(--nep-input); color:var(--nep-dim); transition:all .1s; font-family:var(--nep-font); }
.nep-qmap__btn.nep-cur    { background:var(--nep-primary); border-color:var(--nep-primary); color:#0A1628; }
.nep-qmap__btn.nep-ans    { background:rgba(0,212,170,.12); border-color:rgba(0,212,170,.3); color:var(--nep-primary); }
.nep-qmap__btn.nep-flag   { background:rgba(247,183,49,.2); border-color:var(--nep-yellow); color:var(--nep-yellow); }

/* Results */
.nep-grade-ring       { width:112px; height:112px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 18px; }
.nep-grade-ring__g    { font-size:44px; font-weight:900; line-height:1; font-family:serif; }
.nep-grade-ring__p    { font-size:12px; color:var(--nep-muted); }

/* ── Cascading selector ──────────────────────────────────────────────────── */
.nep-sel              { max-width:920px; margin:0 auto; padding:0 16px 48px; }
.nep-sel__crumbs      { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; }
.nep-sel__crumb       { padding:5px 12px; border-radius:16px; font-size:11px; font-weight:600; border:1px solid transparent; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:all .15s; }
.nep-sel__crumb--done { background:rgba(0,212,170,.12); border-color:rgba(0,212,170,.4); color:var(--nep-primary); cursor:pointer; }
.nep-sel__crumb--cur  { background:var(--nep-border); border-color:var(--nep-border2); color:var(--nep-text); cursor:pointer; }
.nep-sel__crumb--lock { color:var(--nep-dim); cursor:default; }
.nep-sel__grid        { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:10px; margin-bottom:22px; animation:nep-fade-up .3s ease; }
.nep-sel__opt         { padding:13px 15px; background:var(--nep-card); border:2px solid var(--nep-border); border-radius:var(--nep-r); cursor:pointer; text-align:left; font-size:13px; font-family:var(--nep-font); color:var(--nep-text); transition:all .15s; display:flex; align-items:center; gap:8px; }
.nep-sel__opt:hover   { border-color:var(--nep-border2); background:var(--nep-border); }
.nep-sel__opt.nep-active { border-color:var(--nep-primary); background:rgba(0,212,170,.1); color:var(--nep-primary); font-weight:700; }
.nep-sel__launch      { background:var(--nep-card); border-radius:var(--nep-r-lg); padding:22px; border:1px solid rgba(0,212,170,.35); margin-top:8px; animation:nep-fade-up .3s ease; }
.nep-sel__chips       { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.nep-sel__chip        { background:rgba(0,212,170,.1); border:1px solid rgba(0,212,170,.3); border-radius:8px; padding:4px 12px; font-size:12px; color:var(--nep-primary); font-weight:600; }

/* ── Leaderboard podium ─────────────────────────────────────────────────── */
.nep-podium       { display:flex; justify-content:center; align-items:flex-end; gap:10px; margin-bottom:28px; padding:0 16px; }
.nep-podium__item { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; max-width:130px; }
.nep-podium__base { border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:80%; }
.nep-lb-row       { display:flex; align-items:center; gap:12px; background:var(--nep-card); border-radius:var(--nep-r); padding:12px 16px; border:1px solid var(--nep-border); margin-bottom:7px; }

/* ── Notification dot ───────────────────────────────────────────────────── */
.nep-notif-dot    { position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--nep-red); border:2px solid var(--nep-card); }

/* ── Divider / separator ────────────────────────────────────────────────── */
.nep-divider      { height:1px; background:var(--nep-border); margin:16px 0; }
.nep-view-enter   { animation:nep-fade-up .35s ease; }

/* ── Responsive breakpoints ─────────────────────────────────────────────── */
@media (max-width: 900px) {
	.nep-cbt__sidebar                        { display:none; }
	.nep-grid-4, .nep-grid-3, .nep-grid-2   { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px) {
	.nep-grid-4, .nep-grid-3, .nep-grid-2   { grid-template-columns:1fr; }
	.nep-hero__h1                            { letter-spacing:-.8px; }
	.nep-nav__link span:last-child           { display:none; }
	.nep-cbt__body                           { padding:12px; }
}
@media (max-width: 400px) {
	.nep-container { padding:0 10px; }
}