/* AK Exam Results — Frontend Styles */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

:root {
    --aker-green:      #16a34a;
    --aker-green-lt:   #22c55e;
    --aker-green-glow: rgba(34,197,94,.35);
    --aker-gold-lt:    #fcd34d;
    --aker-red:        #ef4444;
    --aker-red-lt:     #fca5a5;
    --aker-dark:       #0f172a;
    --aker-navy:       #1e3a5f;
    --aker-white:      #ffffff;
    --aker-muted:      #64748b;
    --aker-border:     #e2e8f0;
    --aker-radius:     20px;
    --aker-radius-xl:  32px;
    --aker-shadow:     0 20px 60px rgba(15,23,42,.12), 0 4px 16px rgba(15,23,42,.06);
    --aker-shadow-pass:0 24px 80px rgba(22,163,74,.20), 0 4px 24px rgba(22,163,74,.10);
    --aker-font:       'Sora','DM Sans',sans-serif;
}

.aker-wrapper {
    font-family: var(--aker-font);
    max-width: 520px;
    margin: 48px auto;
    padding: 0 16px;
    color: var(--aker-dark);
}

/* ── Card base ── */
.aker-card {
    background: var(--aker-white);
    border-radius: var(--aker-radius-xl);
    box-shadow: var(--aker-shadow);
    overflow: hidden;
    position: relative;
}

/* ═══════════════ FORM CARD ═══════════════ */
.aker-form-card {
    padding: 44px 40px 40px;
    background: linear-gradient(160deg,#fff 60%,#f0fdf4 100%);
    border: 1px solid #d1fae5;
}

.aker-form-badge {
    display: inline-block;
    background: var(--aker-navy);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 99px;
    margin-bottom: 20px;
}

.aker-star { font-size: 40px; line-height: 1; margin-bottom: 10px; display: block; }

.aker-heading {
    font-size: clamp(26px,5vw,34px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 10px;
}

.aker-heading-accent {
    background: linear-gradient(90deg, var(--aker-green), #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aker-subheading { font-size: 14px; color: var(--aker-muted); line-height: 1.7; margin: 0 0 32px; }
.aker-subheading strong { color: var(--aker-dark); }

.aker-fields { display: flex; flex-direction: column; gap: 20px; }
.aker-field-group { display: flex; flex-direction: column; gap: 6px; }

.aker-label { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.aker-label-icon { font-size: 16px; }

.aker-field {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    font-family: var(--aker-font);
    border: 2px solid var(--aker-border);
    border-radius: var(--aker-radius);
    background: #fff;
    color: var(--aker-dark);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.aker-field:focus {
    outline: none;
    border-color: var(--aker-green);
    box-shadow: 0 0 0 4px rgba(22,163,74,.12);
}

.aker-field::placeholder { color: #b0bec5; }
.aker-field-hint { font-size: 12px; color: var(--aker-muted); margin: 0; font-style: italic; }

.aker-check-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--aker-font);
    background: linear-gradient(135deg, var(--aker-green) 0%, #059669 100%);
    color: #fff;
    border: none;
    border-radius: var(--aker-radius);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 20px var(--aker-green-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.aker-check-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px var(--aker-green-glow); }
.aker-check-btn:active:not(:disabled) { transform: translateY(0); }
.aker-check-btn:disabled { opacity: .6; cursor: not-allowed; }

.aker-loader-ring {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: aker-spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes aker-spin { to { transform: rotate(360deg); } }

.aker-inline-error {
    margin-top: 16px;
    padding: 14px 18px;
    background: #fff1f2;
    border: 1.5px solid var(--aker-red-lt);
    border-radius: 12px;
    color: #be123c;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
}

/* ═══════════════ CONFETTI ═══════════════ */
.aker-confetti { position: relative; height: 0; overflow: visible; pointer-events: none; z-index: 10; }
.aker-confetti span {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 2px;
    animation: aker-confetti-fall 2.4s ease-out forwards;
    top: 0;
}
.aker-confetti span:nth-child(1)  { left:10%;  background:#f59e0b; animation-delay:.0s; }
.aker-confetti span:nth-child(2)  { left:25%;  background:#22c55e; animation-delay:.1s; width:7px;height:14px; }
.aker-confetti span:nth-child(3)  { left:40%;  background:#3b82f6; animation-delay:.05s; border-radius:50%; }
.aker-confetti span:nth-child(4)  { left:55%;  background:#ec4899; animation-delay:.15s; width:12px;height:8px; }
.aker-confetti span:nth-child(5)  { left:70%;  background:#f59e0b; animation-delay:.08s; border-radius:50%; }
.aker-confetti span:nth-child(6)  { left:85%;  background:#22c55e; animation-delay:.2s; }
.aker-confetti span:nth-child(7)  { left:5%;   background:#a855f7; animation-delay:.12s; width:7px;height:14px; }
.aker-confetti span:nth-child(8)  { left:48%;  background:#ef4444; animation-delay:.03s; border-radius:50%; }
.aker-confetti span:nth-child(9)  { left:62%;  background:#0ea5e9; animation-delay:.18s; }
.aker-confetti span:nth-child(10) { left:90%;  background:#f97316; animation-delay:.09s; width:8px;height:14px; }

@keyframes aker-confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity:1; }
    100% { transform: translateY(280px) rotate(720deg); opacity:0; }
}

/* ═══════════════ PASS CARD ═══════════════ */
.aker-pass-card {
    padding: 0 0 40px;
    background: linear-gradient(165deg,#f0fdf4 0%,#dcfce7 40%,#fff 70%);
    border: 2px solid #bbf7d0;
    box-shadow: var(--aker-shadow-pass);
    text-align: center;
    margin-top: 12px;
}

.aker-pass-ribbon {
    background: linear-gradient(90deg, var(--aker-green) 0%, #059669 100%);
    color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .2em;
    padding: 9px 0;
    margin-bottom: 36px;
}

.aker-trophy-wrap { position: relative; display: inline-block; margin-bottom: 10px; }

.aker-trophy-glow {
    position: absolute; inset: -16px;
    background: radial-gradient(circle, rgba(245,158,11,.35) 0%, transparent 70%);
    border-radius: 50%;
    animation: aker-pulse 2s ease-in-out infinite;
}

@keyframes aker-pulse { 0%,100%{transform:scale(1);opacity:.8;} 50%{transform:scale(1.15);opacity:1;} }

.aker-trophy {
    font-size: 72px; line-height: 1; position: relative;
    animation: aker-bounce 1.2s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes aker-bounce {
    0%  { transform:scale(0) rotate(-12deg); opacity:0; }
    60% { transform:scale(1.15) rotate(4deg); opacity:1; }
    80% { transform:scale(.95) rotate(-2deg); }
    100%{ transform:scale(1) rotate(0); }
}

.aker-pass-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px;
    background: linear-gradient(135deg, var(--aker-green) 0%, #059669 100%);
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 6px 24px var(--aker-green-glow);
    margin: 16px auto 20px;
    position: relative;
}

.aker-pass-badge::before {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px dashed #86efac;
    animation: aker-rotate 8s linear infinite;
}

@keyframes aker-rotate { to { transform: rotate(360deg); } }

.aker-pass-badge-text { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: .1em; }

.aker-pass-name { font-size: clamp(22px,4.5vw,28px); font-weight: 800; margin: 0 0 12px; padding: 0 24px; line-height: 1.25; }
.aker-student-name { color: var(--aker-green); }
.aker-pass-msg { font-size: 14px; color: var(--aker-muted); margin: 0 0 20px; }

.aker-course-banner {
    margin: 0 24px 28px;
    background: linear-gradient(135deg, var(--aker-navy) 0%, #1e40af 100%);
    border-radius: 16px; padding: 18px 24px;
    box-shadow: 0 8px 24px rgba(30,58,138,.25);
}

.aker-course-inner { display:flex; align-items:center; justify-content:center; gap:16px; }
.aker-course-icon { font-size: 36px; }
.aker-course-label { color: var(--aker-gold-lt); font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; margin-bottom:4px; }
.aker-course-title { color:#fff; font-size:20px; font-weight:800; line-height:1.1; }

.aker-divider { height:1px; background:linear-gradient(90deg,transparent,#bbf7d0,transparent); margin:0 24px 28px; }

.aker-announce-box { margin:0 24px 32px; background:#fff; border:1.5px solid #e0f2fe; border-radius:16px; padding:20px; }
.aker-announce-icon { font-size:28px; margin-bottom:8px; }
.aker-announce-text { font-size:13px; color:var(--aker-muted); margin:0 0 16px; line-height:1.6; }

.aker-channels { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.aker-channel {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:12px 14px; border-radius:12px;
    font-size:12px; font-weight:700; text-align:center;
    text-decoration:none; line-height:1.3;
    flex:1 1 90px; min-width:0;
    transition:transform .2s, box-shadow .2s;
}
.aker-channel:hover { transform:translateY(-3px); }
.aker-channel span { font-size:22px; }
.aker-channel small { font-weight:400; font-size:10px; display:block; opacity:.8; }

.aker-ch-social { background:#eff6ff; color:#1d4ed8; }
.aker-ch-social:hover { box-shadow:0 6px 18px rgba(29,78,216,.2); color:#1d4ed8; }
.aker-ch-lms { background:#fdf4ff; color:#7e22ce; }
.aker-ch-lms:hover { box-shadow:0 6px 18px rgba(126,34,206,.2); color:#7e22ce; }
.aker-ch-wa { background:#f0fdf4; color:#166534; }
.aker-ch-wa:hover { box-shadow:0 6px 18px rgba(22,101,52,.2); color:#166534; }

.aker-check-another {
    background:none; border:2px solid #d1d5db; border-radius:99px;
    padding:10px 24px; font-size:14px; font-family:var(--aker-font);
    font-weight:600; color:var(--aker-muted); cursor:pointer;
    transition:border-color .2s, color .2s;
}
.aker-check-another:hover { border-color:var(--aker-green); color:var(--aker-green); }

/* ═══════════════ FAIL CARD ═══════════════ */
.aker-fail-card {
    padding: 0 0 40px;
    text-align: center;
    border: 2px solid #fecaca;
    background: linear-gradient(165deg,#fff 50%,#fff5f5 100%);
    box-shadow: 0 20px 60px rgba(239,68,68,.10), 0 4px 16px rgba(239,68,68,.06);
    margin-top: 12px;
}

.aker-fail-ribbon {
    background: linear-gradient(90deg,#dc2626 0%,#b91c1c 100%);
    color:#fff; font-size:12px; font-weight:800; letter-spacing:.2em;
    padding:9px 0; margin-bottom:28px;
}

.aker-fail-badge-wrap { display:flex; justify-content:center; margin-bottom:10px; }

.aker-fail-badge {
    display:inline-flex; align-items:center; justify-content:center;
    width:72px; height:72px;
    background:linear-gradient(135deg,#ef4444 0%,#b91c1c 100%);
    border-radius:50%; border:4px solid #fff;
    box-shadow:0 6px 24px rgba(239,68,68,.35);
    position:relative;
}

.aker-fail-badge::before {
    content:''; position:absolute; inset:-6px;
    border-radius:50%; border:2px dashed #fca5a5;
    animation:aker-rotate 8s linear infinite;
}

.aker-fail-badge-text { font-size:14px; font-weight:900; color:#fff; letter-spacing:.1em; }

.aker-fail-emoji { font-size:52px; line-height:1; margin-bottom:14px; display:block; animation:aker-bounce 1s cubic-bezier(.36,.07,.19,.97) both; }

.aker-fail-heading { font-size:clamp(22px,4.5vw,28px); font-weight:800; color:var(--aker-dark); margin:0 0 14px; padding:0 24px; }

.aker-fail-quote {
    font-size:13px; color:var(--aker-muted); font-style:italic;
    margin:0 24px 22px; padding:12px 16px;
    background:#fef2f2; border-left:3px solid #fca5a5;
    border-radius:0 8px 8px 0; text-align:left; line-height:1.7;
}

.aker-fail-msg-box {
    margin:0 24px 22px; background:#fff;
    border:1.5px solid #fee2e2; border-radius:16px; padding:20px 22px; text-align:left;
}

.aker-fail-msg-box p { font-size:14px; color:#374151; line-height:1.75; margin:0 0 12px; }
.aker-fail-msg-box p:last-child { margin-bottom:0; }
.aker-fail-msg-box strong { color:var(--aker-dark); }
.aker-fail-msg-box em { color:#b91c1c; font-style:normal; font-weight:600; }

.aker-fail-divider { height:1px; background:linear-gradient(90deg,transparent,#fecaca,transparent); margin:0 24px 20px; }

.aker-fail-channels-label { font-size:12px; font-weight:700; color:var(--aker-muted); letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px; padding:0 24px; }

.aker-fail-channels { margin:0 24px 28px; }

.aker-try-again {
    background:none; border:2px solid #d1d5db; border-radius:99px;
    padding:10px 28px; font-size:14px; font-family:var(--aker-font);
    font-weight:600; color:var(--aker-muted); cursor:pointer;
    transition:border-color .2s, color .2s;
}
.aker-try-again:hover { border-color:#ef4444; color:#dc2626; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:520px) {
    .aker-wrapper { margin:24px auto; padding:0 10px; }
    .aker-form-card { padding:32px 22px 28px; }
    .aker-pass-card, .aker-fail-card { padding-bottom:32px; }
    .aker-pass-name, .aker-fail-heading { padding:0 18px; }
    .aker-course-banner, .aker-announce-box, .aker-fail-msg-box { margin-left:16px; margin-right:16px; }
    .aker-fail-channels, .aker-channels { margin-left:16px; margin-right:16px; }
    .aker-channel { padding:10px 8px; flex:1 1 70px; }
}