/* ═══════════════════════════════════════════════════════
   Digital Marketing Exam — Professional Dark UI v3.0
   Indiatics Academy · www.indiatics.com
   ═══════════════════════════════════════════════════════ */

/* ── Base ── */
.dme-wrap *{box-sizing:border-box;margin:0;padding:0;}
.dme-wrap{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    max-width:700px;margin:0 auto 52px;
    color:#e2e8f0;
    -webkit-font-smoothing:antialiased;
}
.dme-step{display:none;}
.dme-step.active{display:block;}
.dme-error{
    background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);
    color:#fca5a5;padding:14px 18px;border-radius:12px;
    font-size:.9rem;font-weight:600;
}

/* ════════════════════════════════════════════
   REGISTRATION — HERO HEADER
   ════════════════════════════════════════════ */
.dme-reg-wrap{
    border-radius:22px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);
}

/* Hero band */
.dme-hero{
    position:relative;overflow:hidden;
    padding:36px 32px 0;
}
/* Radial glow effect */
.dme-hero-glow{
    position:absolute;top:-40px;left:50%;transform:translateX(-50%);
    width:500px;height:300px;border-radius:50%;
    background:radial-gradient(ellipse,rgba(201,168,76,.18) 0%,transparent 70%);
    pointer-events:none;
}
/* Logo + Brand row */
.dme-hero-inner{
    position:relative;z-index:2;
    display:flex;flex-direction:column;align-items:center;
    text-align:center;gap:14px;
    padding-bottom:26px;
}
/* Logo — constrained, circular/rounded frame */
.dme-hero-logo-wrap{
    width:88px;height:88px;
    border-radius:20px;overflow:hidden;
    background:rgba(255,255,255,.08);
    border:2px solid rgba(255,255,255,.14);
    box-shadow:0 8px 32px rgba(0,0,0,.4);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.dme-hero-logo{
    width:100%;height:100%;
    object-fit:contain;
    padding:8px;
}
/* Brand text */
.dme-hero-brand{text-align:center;}
.dme-hero-name{
    font-size:1.5rem;font-weight:900;
    color:#f1f5f9;letter-spacing:.5px;
    line-height:1.15;
}
.dme-hero-tag{
    font-size:.82rem;color:rgba(255,255,255,.5);
    margin-top:4px;font-weight:500;letter-spacing:.3px;
}
/* Subject strip at bottom of hero */
.dme-hero-strip{
    position:relative;z-index:2;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 32px;
    background:rgba(0,0,0,.25);
    border-top:1px solid rgba(255,255,255,.06);
    flex-wrap:wrap;gap:8px;
}
.dme-subj-badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 16px;border-radius:30px;
    color:#fff;font-size:.84rem;font-weight:800;
    letter-spacing:.3px;
    box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.dme-hero-cert-tag{
    font-size:.76rem;color:rgba(255,255,255,.45);
    font-weight:600;letter-spacing:.3px;
}

/* ════════════════════════════════════════════
   REGISTRATION — BODY
   ════════════════════════════════════════════ */
.dme-reg-body{
    background:linear-gradient(180deg,#111827 0%,#0d1520 100%);
    padding:28px 32px 32px;
}

/* Stats row */
.dme-stats-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
    margin-bottom:28px;
}
.dme-stat-box{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;padding:14px 10px;text-align:center;
    transition:all .2s;
}
.dme-stat-box:hover{
    background:rgba(201,168,76,.08);
    border-color:rgba(201,168,76,.22);
}
.dme-stat-icon{font-size:1.3rem;margin-bottom:6px;}
.dme-stat-val{
    font-size:1.2rem;font-weight:900;color:#c9a84c;
    line-height:1;margin-bottom:4px;
}
.dme-stat-lbl{
    font-size:.68rem;color:#475569;
    font-weight:700;text-transform:uppercase;letter-spacing:.5px;
}

/* Divider */
.dme-divider{
    display:flex;align-items:center;gap:12px;
    margin-bottom:22px;
}
.dme-divider::before,.dme-divider::after{
    content:'';flex:1;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
.dme-divider span{
    font-size:.74rem;color:#334155;font-weight:700;
    text-transform:uppercase;letter-spacing:.7px;white-space:nowrap;
}

/* Form */
.dme-form-grid{display:grid;gap:14px;margin-bottom:6px;}
.dme-form-group{}
.dme-label{
    display:block;font-size:.76rem;font-weight:700;
    color:#64748b;margin-bottom:8px;
    text-transform:uppercase;letter-spacing:.5px;
}
.req{color:#f87171;}
.dme-input{
    width:100%;padding:13px 16px;
    background:rgba(255,255,255,.05);
    border:1.5px solid rgba(255,255,255,.09);
    border-radius:11px;
    font-size:.95rem;color:#f1f5f9;
    outline:none;transition:all .2s;
    font-family:inherit;
}
.dme-input::placeholder{color:rgba(255,255,255,.18);}
.dme-input:focus{
    border-color:rgba(201,168,76,.55);
    background:rgba(201,168,76,.05);
    box-shadow:0 0 0 4px rgba(201,168,76,.08);
}
.dme-msg{font-size:.82rem;font-weight:600;margin:8px 0 4px;}
.dme-msg.error{color:#f87171;}
.dme-msg.info{color:#60a5fa;}

/* Start button */
.dme-btn-start{
    width:100%;margin-top:18px;padding:15px 24px;
    background:linear-gradient(135deg,#c9a84c 0%,#e8c55a 50%,#c9a84c 100%);
    background-size:200% auto;
    color:#0f0f0f;border:none;border-radius:13px;
    font-size:1rem;font-weight:900;cursor:pointer;
    letter-spacing:.4px;transition:all .25s;
    display:flex;align-items:center;justify-content:center;gap:10px;
    box-shadow:0 4px 20px rgba(201,168,76,.3);
    position:relative;overflow:hidden;
}
.dme-btn-start::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
    opacity:0;transition:opacity .2s;
}
.dme-btn-start:hover{
    background-position:right center;
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(201,168,76,.45);
}
.dme-btn-start:hover::before{opacity:1;}
.dme-btn-start:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
.dme-btn-start-icon{font-size:1.1rem;}
.dme-btn-start-arrow{
    font-size:1rem;margin-left:auto;
    opacity:.6;transition:transform .2s;
}
.dme-btn-start:hover .dme-btn-start-arrow{transform:translateX(4px);opacity:1;}

/* Note */
.dme-reg-note{
    text-align:center;font-size:.72rem;color:#1e3a5f;
    margin-top:14px;letter-spacing:.2px;
}

/* ════════════════════════════════════════════
   EXAM SCREEN
   ════════════════════════════════════════════ */
.dme-exam-wrap{
    background:linear-gradient(160deg,#0d1520,#111827);
    border-radius:22px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);
}

/* Top bar */
.dme-top-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 24px;gap:16px;
    background:rgba(0,0,0,.35);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.dme-timer-display{
    font-size:1rem;font-weight:900;
    color:#c9a84c;font-family:monospace;
    letter-spacing:2px;
    background:rgba(201,168,76,.1);
    border:1px solid rgba(201,168,76,.2);
    padding:5px 14px;border-radius:8px;
}
.dme-timer-display.warn{
    color:#f87171;background:rgba(239,68,68,.12);
    border-color:rgba(239,68,68,.3);
    animation:tmrPulse .7s infinite;
}
@keyframes tmrPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.dme-progress-right{text-align:right;}
.dme-progress-info{font-size:.78rem;color:#334155;font-weight:700;margin-bottom:5px;}
.dme-progress-track{
    height:4px;background:rgba(255,255,255,.06);
    border-radius:2px;overflow:hidden;width:130px;margin-left:auto;
}
.dme-progress-fill{
    height:100%;
    background:linear-gradient(90deg,#1a3c6e,#c9a84c);
    border-radius:2px;transition:width .35s ease;
}

/* Question card */
.dme-q-card{padding:28px 28px 20px;}
.dme-q-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;
}
.dme-q-badge{
    background:rgba(201,168,76,.1);
    border:1px solid rgba(201,168,76,.22);
    color:#c9a84c;font-size:.7rem;font-weight:800;
    letter-spacing:.7px;text-transform:uppercase;
    padding:4px 12px;border-radius:20px;
}
.dme-q-text{
    font-size:1.06rem;font-weight:700;color:#f1f5f9;
    line-height:1.65;margin-bottom:22px;
}

/* Options */
.dme-options{display:flex;flex-direction:column;gap:10px;}
.dme-option{
    display:flex;align-items:center;gap:14px;
    padding:13px 17px;
    background:rgba(255,255,255,.03);
    border:1.5px solid rgba(255,255,255,.07);
    border-radius:12px;cursor:pointer;
    transition:all .17s;text-align:left;width:100%;
}
.dme-option:hover{
    border-color:rgba(201,168,76,.3);
    background:rgba(201,168,76,.06);
    transform:translateX(3px);
}
.dme-option.selected{
    border-color:rgba(201,168,76,.55);
    background:rgba(201,168,76,.09);
}
.dme-option.selected .dme-opt-letter{background:#c9a84c;color:#000;border-color:#c9a84c;}
.dme-option.correct{border-color:#22c55e!important;background:rgba(34,197,94,.1)!important;cursor:default;transform:none!important;}
.dme-option.correct .dme-opt-letter{background:#22c55e!important;color:#fff!important;border-color:#22c55e!important;}
.dme-option.wrong{border-color:#ef4444!important;background:rgba(239,68,68,.08)!important;cursor:default;transform:none!important;}
.dme-option.wrong .dme-opt-letter{background:#ef4444!important;color:#fff!important;border-color:#ef4444!important;}
.dme-option.locked{cursor:default;pointer-events:none;}
.dme-option.locked:hover{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.03);transform:none;}
.dme-opt-letter{
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.07);
    border:1.5px solid rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;
    font-size:.75rem;font-weight:900;color:#64748b;
    flex-shrink:0;transition:all .17s;
}
.dme-opt-text{font-size:.91rem;color:#cbd5e1;line-height:1.45;font-weight:500;flex:1;}
.dme-opt-icon{margin-left:auto;font-size:1rem;flex-shrink:0;}

/* Feedback */
.dme-feedback{
    margin-top:14px;padding:11px 15px;border-radius:10px;
    font-size:.85rem;font-weight:700;display:none;
    align-items:center;gap:9px;animation:fbIn .22s ease;
}
@keyframes fbIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.dme-feedback.show{display:flex;}
.dme-feedback.correct-fb{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.22);color:#86efac;}
.dme-feedback.wrong-fb{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.22);color:#fca5a5;}
.dme-feedback-icon{font-size:1.2rem;}

/* Nav bar */
.dme-nav-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 24px;
    background:rgba(0,0,0,.22);
    border-top:1px solid rgba(255,255,255,.05);
    gap:10px;
}
.dme-btn-nav{
    padding:10px 22px;border:none;border-radius:9px;
    font-size:.87rem;font-weight:800;cursor:pointer;
    transition:all .17s;display:inline-flex;align-items:center;gap:7px;
}
.dme-btn-prev{background:rgba(255,255,255,.05);color:#475569;border:1px solid rgba(255,255,255,.07);}
.dme-btn-prev:hover:not(:disabled){background:rgba(255,255,255,.09);color:#94a3b8;}
.dme-btn-prev:disabled{opacity:.22;cursor:not-allowed;}
.dme-btn-next{background:linear-gradient(135deg,#1a3c6e,#1d4a90);color:#fff;}
.dme-btn-next:hover{transform:translateY(-1px);box-shadow:0 5px 15px rgba(26,60,110,.4);}
.dme-btn-submit{background:linear-gradient(135deg,#c9a84c,#e8c55a)!important;color:#000!important;}
.dme-btn-submit:hover{transform:translateY(-1px);box-shadow:0 5px 15px rgba(201,168,76,.4)!important;}

/* Palette */
.dme-palette-wrap{
    padding:12px 24px 16px;
    border-top:1px solid rgba(255,255,255,.04);
    background:rgba(0,0,0,.12);
}
.dme-palette-label{font-size:.65rem;color:#1e3a5f;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:9px;}
.dme-palette{display:flex;flex-wrap:wrap;gap:5px;}
.dme-pal-dot{
    width:30px;height:30px;border-radius:7px;
    border:1.5px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);
    color:#1e3a5f;font-size:.69rem;font-weight:800;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:all .13s;
}
.dme-pal-dot:hover{border-color:rgba(201,168,76,.3);color:#c9a84c;}
/* ── Correct answer — solid green border ── */
.dme-pal-dot.correct-ans{
    background:rgba(34,197,94,.18);
    border:2px solid #22c55e;
    color:#4ade80;
    font-weight:900;
    box-shadow:0 0 0 1px rgba(34,197,94,.25),0 0 6px rgba(34,197,94,.2);
}
/* ── Wrong answer — solid red border ── */
.dme-pal-dot.wrong-ans{
    background:rgba(239,68,68,.18);
    border:2px solid #ef4444;
    color:#f87171;
    font-weight:900;
    box-shadow:0 0 0 1px rgba(239,68,68,.25),0 0 6px rgba(239,68,68,.2);
}
/* ── Current question — gold border ── */
.dme-pal-dot.current{
    background:rgba(201,168,76,.15);
    border:2px solid #c9a84c;
    color:#c9a84c;
    box-shadow:0 0 0 2px rgba(201,168,76,.18),0 0 6px rgba(201,168,76,.15);
}
/* Current + correct — green fill, gold ring */
.dme-pal-dot.correct-ans.current{
    background:rgba(34,197,94,.25);
    border:2px solid #22c55e;
    color:#4ade80;
    box-shadow:0 0 0 2.5px rgba(201,168,76,.5);
}
/* Current + wrong — red fill, gold ring */
.dme-pal-dot.wrong-ans.current{
    background:rgba(239,68,68,.25);
    border:2px solid #ef4444;
    color:#f87171;
    box-shadow:0 0 0 2.5px rgba(201,168,76,.5);
}
/* Unanswered + current */
.dme-pal-dot.current:not(.correct-ans):not(.wrong-ans){
    background:rgba(201,168,76,.18);
    border:2px solid #c9a84c;
    color:#c9a84c;
}

/* ════════════════════════════════════════════
   RESULT CARD
   ════════════════════════════════════════════ */
.dme-result-card{
    background:linear-gradient(160deg,#0d1520,#111827);
    border-radius:22px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);
}
.dme-result-header{padding:36px 28px 24px;text-align:center;}
.dme-result-header.pass{background:linear-gradient(135deg,#052e16,#14532d);border-bottom:1px solid rgba(34,197,94,.14);}
.dme-result-header.fail{background:linear-gradient(135deg,#1c0a0a,#7f1d1d);border-bottom:1px solid rgba(239,68,68,.14);}
.dme-result-icon{font-size:3.8rem;margin-bottom:11px;}
.dme-result-verdict{font-size:1.5rem;font-weight:900;color:#f1f5f9;margin-bottom:7px;}
.dme-result-sub{font-size:.87rem;color:rgba(255,255,255,.52);}
.dme-score-row{display:flex;padding:20px 28px;gap:1px;background:rgba(0,0,0,.22);border-bottom:1px solid rgba(255,255,255,.05);}
.dme-score-col{flex:1;text-align:center;padding:10px 6px;}
.dme-score-col+.dme-score-col{border-left:1px solid rgba(255,255,255,.05);}
.dme-score-big{font-size:1.9rem;font-weight:900;color:#c9a84c;line-height:1;margin-bottom:4px;}
.dme-score-lbl{font-size:.67rem;color:#334155;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.dme-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.04);}
.dme-stat-cell{padding:15px 10px;text-align:center;background:#101b2c;}
.dme-stat-n{font-size:1.25rem;font-weight:900;}
.dme-stat-l{font-size:.67rem;color:#334155;font-weight:700;text-transform:uppercase;margin-top:3px;}
.dme-cert-block{padding:22px 28px;background:rgba(201,168,76,.04);border-top:1px solid rgba(201,168,76,.1);text-align:center;}
.dme-cert-label{font-size:.68rem;color:#c9a84c;font-weight:800;text-transform:uppercase;letter-spacing:.8px;opacity:.6;margin-bottom:8px;}
.dme-cert-id-display{font-family:monospace;font-size:1.05rem;font-weight:900;color:#c9a84c;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.2);padding:9px 20px;border-radius:8px;display:inline-block;margin-bottom:14px;letter-spacing:1px;}
.dme-btn-cert{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:linear-gradient(135deg,#c9a84c,#e8c55a);color:#0f0f0f;border:none;border-radius:11px;font-size:.92rem;font-weight:900;cursor:pointer;transition:all .2s;}
.dme-btn-cert:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(201,168,76,.4);}
.dme-result-footer{padding:16px 28px;text-align:center;border-top:1px solid rgba(255,255,255,.04);}
.dme-btn-retry{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;background:rgba(255,255,255,.05);color:#475569;border:1px solid rgba(255,255,255,.07);border-radius:9px;font-size:.84rem;font-weight:700;cursor:pointer;transition:all .17s;}
.dme-btn-retry:hover{background:rgba(255,255,255,.08);color:#94a3b8;}

/* Spinner */
.dme-spinner{display:inline-block;width:15px;height:15px;border:2.5px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Responsive ── */
@media(max-width:600px){
    .dme-hero{padding:26px 18px 0;}
    .dme-hero-strip{padding:12px 18px;}
    .dme-reg-body{padding:22px 18px 26px;}
    .dme-stats-row{grid-template-columns:repeat(2,1fr);}
    .dme-q-card,.dme-cert-block,.dme-result-footer{padding-left:18px;padding-right:18px;}
    .dme-nav-bar,.dme-palette-wrap,.dme-top-bar{padding-left:16px;padding-right:16px;}
    .dme-q-text{font-size:.97rem;}
    .dme-hero-name{font-size:1.25rem;}
    .dme-hero-logo-wrap{width:72px;height:72px;}
}

/* ── Exam hero logo positions ── */
.dme-hero-inner.dme-logo-left{
    flex-direction:row;align-items:center;text-align:left;gap:18px;
}
.dme-hero-inner.dme-logo-left .dme-hero-brand{text-align:left;}
.dme-hero-inner.dme-logo-center{
    flex-direction:column;align-items:center;text-align:center;
}
.dme-hero-inner.dme-logo-center .dme-hero-brand{text-align:center;}
/* Override logo-wrap sizing (controlled by inline style from PHP) */
.dme-hero-logo-wrap{
    border-radius:16px;overflow:hidden;
    background:rgba(255,255,255,.1);
    border:2px solid rgba(255,255,255,.15);
    box-shadow:0 6px 24px rgba(0,0,0,.35);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.dme-hero-logo{width:100%;height:100%;object-fit:contain;padding:8px;}

/* ── Palette legend ── */
.dme-pal-legend{
    display:flex;flex-wrap:wrap;gap:10px;
    margin-top:10px;padding-top:9px;
    border-top:1px solid rgba(255,255,255,.05);
}
.dme-pal-leg{
    font-size:.63rem;font-weight:700;letter-spacing:.3px;
    display:flex;align-items:center;gap:4px;
    padding:2px 0;
}
.dme-leg-correct{color:#4ade80;}
.dme-leg-wrong{color:#f87171;}
.dme-leg-current{color:#c9a84c;}
.dme-leg-unanswered{color:#334155;}