/* ExamPulse premium UI layer (works on top of Tailwind CDN) */
:root {
  --ep-indigo: #4f46e5;
  --ep-violet: #7c3aed;
  --ep-ink: #0f172a;
}
html { -webkit-tap-highlight-color: transparent; }
body { background-image: radial-gradient(1200px 500px at 100% -10%, rgba(99,102,241,.07), transparent 60%), radial-gradient(900px 400px at -10% 10%, rgba(236,72,153,.05), transparent 60%); background-attachment: fixed; }

/* Sidebar */
.ep-sidebar {
  background: radial-gradient(600px 300px at 0% 0%, rgba(99,102,241,.35), transparent 60%),
              radial-gradient(500px 300px at 100% 100%, rgba(217,70,239,.18), transparent 60%),
              linear-gradient(180deg, #0b1023 0%, #111735 55%, #170f33 100%);
  box-shadow: 8px 0 40px -20px rgba(15,23,42,.6);
}
.ep-sidebar.open { transform: translateX(0); }
.ep-nav { color: #cbd5e1; transition: background .2s, color .2s, transform .2s; }
.ep-nav:hover { background: rgba(255,255,255,.06); color: #fff; transform: translateX(2px); }
.ep-nav-active { color: #fff !important; background: linear-gradient(90deg, rgba(99,102,241,.95), rgba(139,92,246,.85)); box-shadow: 0 10px 25px -12px rgba(99,102,241,.9), inset 0 1px 0 rgba(255,255,255,.15); }
.ep-scroll::-webkit-scrollbar { width: 6px; }
.ep-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 9px; }

/* Glass top bar */
.ep-topbar { background: rgba(248,250,252,.72); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(226,232,240,.7); }

/* Cards */
.ep-card { background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 1.25rem; border: 1px solid rgba(226,232,240,.8); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -18px rgba(15,23,42,.18); }
.ep-glass { background: rgba(255,255,255,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.22); }

/* Forms */
.ep-input { width: 100%; border-radius: .85rem; border: 1px solid #e2e8f0; background: #fff; padding: .65rem .9rem; font-size: .9rem; color: #0f172a; transition: border-color .15s, box-shadow .15s; }
.ep-input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 4px rgba(99,102,241,.15); }
.ep-label { display: block; font-size: .78rem; font-weight: 700; color: #475569; margin-bottom: .35rem; letter-spacing: .01em; }
select.ep-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 1rem; padding-right: 2.2rem; }

/* Buttons */
.ep-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: .85rem; padding: .62rem 1.1rem; font-size: .875rem; font-weight: 700; transition: all .2s; white-space: nowrap; }
.ep-btn-primary { color: #fff; background: linear-gradient(135deg, #6366f1, #7c3aed); box-shadow: 0 10px 22px -10px rgba(99,102,241,.75); }
.ep-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(99,102,241,.9); }
.ep-btn-light { color: #334155; background: #fff; border: 1px solid #e2e8f0; }
.ep-btn-light:hover { background: #f8fafc; border-color: #cbd5e1; }
.ep-btn-danger { color: #fff; background: linear-gradient(135deg, #f43f5e, #e11d48); }
.ep-btn-success { color: #fff; background: linear-gradient(135deg, #10b981, #059669); }
.ep-btn-sm { padding: .4rem .75rem; font-size: .78rem; border-radius: .65rem; }
.ep-icon-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; color: #64748b; transition: all .15s; }
.ep-icon-btn:hover { background: #eef2ff; color: #4f46e5; }
.ep-icon-btn.danger:hover { background: #fff1f2; color: #e11d48; }

/* Tables */
.ep-table { width: 100%; font-size: .875rem; }
.ep-table thead th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 700; padding: .8rem 1.25rem; background: #f8fafc; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.ep-table tbody td { padding: .85rem 1.25rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.ep-table tbody tr:hover { background: #fafbff; }
.ep-table tbody tr:last-child td { border-bottom: 0; }

/* Live indicator */
.ep-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .65rem; font-weight: 800; letter-spacing: .12em; color: #059669; background: #ecfdf5; padding: .25rem .6rem; border-radius: 999px; }
.ep-live-dot { width: .45rem; height: .45rem; border-radius: 999px; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.7); animation: ep-pulse 1.6s infinite; }
@keyframes ep-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); } 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.ep-flash { animation: ep-flash 1s ease; }
@keyframes ep-flash { 0% { color: #4f46e5; transform: scale(1.06); } 100% { transform: scale(1); } }

/* Toasts */
.ep-toast { animation: ep-in .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes ep-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }

/* Modals */
.ep-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: flex-end; justify-content: center; background: rgba(15,23,42,.55); backdrop-filter: blur(6px); padding: 0; }
.ep-modal.open { display: flex; }
.ep-modal-box { width: 100%; max-width: 40rem; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 30px 80px -20px rgba(15,23,42,.5); animation: ep-up .3s cubic-bezier(.2,.9,.3,1.1); }
@media (min-width: 640px) { .ep-modal { align-items: center; padding: 1.5rem; } .ep-modal-box { border-radius: 1.5rem; } }
@keyframes ep-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Student app */
.ep-app-header { background: radial-gradient(500px 220px at 90% 0%, rgba(236,72,153,.45), transparent 60%), linear-gradient(135deg, #4338ca 0%, #6d28d9 55%, #7c3aed 100%); border-radius: 0 0 1.75rem 1.75rem; box-shadow: 0 20px 40px -24px rgba(79,70,229,.8); }
.ep-bottom-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid #e2e8f0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -10px 30px -18px rgba(15,23,42,.25); }

/* Exam engine */
.ep-opt { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; border: 1.5px solid #e2e8f0; background: #fff; border-radius: 1rem; padding: .9rem 1rem; transition: all .15s; }
.ep-opt:hover { border-color: #a5b4fc; background: #f8faff; }
.ep-opt .ep-opt-key { flex-shrink: 0; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: .7rem; background: #f1f5f9; font-weight: 800; color: #475569; }
.ep-opt.selected { border-color: #6366f1; background: #eef2ff; box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.ep-opt.selected .ep-opt-key { background: #6366f1; color: #fff; }
.ep-opt.correct { border-color: #10b981; background: #ecfdf5; }
.ep-opt.correct .ep-opt-key { background: #10b981; color: #fff; }
.ep-opt.wrong { border-color: #f43f5e; background: #fff1f2; }
.ep-opt.wrong .ep-opt-key { background: #f43f5e; color: #fff; }
.ep-pal { width: 2.4rem; height: 2.4rem; border-radius: .7rem; font-weight: 700; font-size: .82rem; display: grid; place-items: center; background: #f1f5f9; color: #475569; border: 1.5px solid transparent; transition: all .12s; position: relative; }
.ep-pal.answered { background: #10b981; color: #fff; }
.ep-pal.skipped { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
.ep-pal.review { background: #f59e0b; color: #fff; }
.ep-pal.review.answered::after { content: ''; position: absolute; right: -3px; top: -3px; width: .7rem; height: .7rem; border-radius: 999px; background: #10b981; border: 2px solid #fff; }
.ep-pal.current { outline: 3px solid #6366f1; outline-offset: 2px; }
.ep-timer-warn { animation: ep-blink 1s steps(2, start) infinite; }
@keyframes ep-blink { to { color: #fecaca; } }

/* Ring progress */
.ep-ring { --p: 0; --c: #6366f1; width: 140px; height: 140px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), #eef2ff 0); display: grid; place-items: center; }
.ep-ring > div { width: 112px; height: 112px; border-radius: 50%; background: #fff; display: grid; place-items: center; }

@media print {
  .ep-sidebar, .ep-topbar, .ep-bottom-nav, .no-print, #ep-toasts { display: none !important; }
  .lg\:pl-72 { padding-left: 0 !important; }
  body { background: #fff !important; }
  .ep-card { box-shadow: none; border-color: #ddd; }
}