@extends('layouts.staff')

@section('title', 'Assessment')

@section('content')

<style>
/* =========================================================
   PREMIUM DARK (LeetCode-style) — RESPONSIVE (PROD)
   ✅ FIX: Ace cursor/space drift (remove forced line-height)
   ✅ FIX: Timer reliable (uses UNIX timestamp)
   ✅ FIX: Calculator opens + ESC closes (no fullscreen exit)
   ✅ FIX: Finish exam works (no JS syntax error)
========================================================= */
:root{
    --bg: #0b0f14;
    --bg2:#0f1722;
    --panel:#121a26;
    --panel2:#0f1720;
    --border: rgba(148,163,184,.14);
    --border2: rgba(148,163,184,.20);

    --text:#e5e7eb;
    --muted:#9aa4b2;

    --accent:#ffa116;
    --accent2:#ffb84d;
    --blue:#3b82f6;
    --green:#22c55e;
    --red:#ef4444;
    --amber:#f59e0b;

    --shadow: 0 18px 60px rgba(0,0,0,.55);
    --shadow2: 0 10px 30px rgba(0,0,0,.45);

    --radius: 14px;
    --radius2: 10px;
}

/* BASE (IMPORTANT: do NOT set font-size in * selector) */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background:
        radial-gradient(900px 600px at 20% 0%, rgba(255,161,22,.10), transparent 60%),
        radial-gradient(900px 600px at 80% 30%, rgba(59,130,246,.10), transparent 60%),
        var(--bg);
    color: var(--text);
    overflow:auto;
    font-size: 14px;
}

/* FULLSCREEN INTRO */
.fullscreen-intro{
    position:fixed; inset:0;
    background: rgba(0,0,0,.92);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; padding:20px;
    backdrop-filter: blur(8px);
}
.intro-container{
    width:min(560px, 100%);
    background: rgba(18,26,38,.85);
    border:1px solid var(--border2);
    border-radius: 18px;
    padding: 28px 22px;
    box-shadow: var(--shadow);
    text-align:center;
}
.intro-icon{
    width:72px;height:72px;border-radius:18px;
    display:grid;place-items:center;
    margin: 0 auto 14px auto;
    background: rgba(255,161,22,.12);
    border:1px solid rgba(255,161,22,.25);
    color: var(--accent);
    font-size: 30px;
}
.intro-text h1{ font-size: 28px; font-weight: 800; letter-spacing: .2px; margin-bottom: 6px; }
.assessment-name{ color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.instruction{ color: rgba(229,231,235,.85); font-size: 14px; margin-bottom: 18px; }
.enter-fullscreen-btn{
    width: 100%;
    border:none;
    background: var(--accent);
    color:#111827;
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 800;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px;
    transition: transform .18s ease, filter .18s ease;
}
.enter-fullscreen-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.enter-fullscreen-btn:active{ transform: translateY(0px); }
.intro-notice{
    margin-top: 14px;
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 12px;
    padding: 10px 12px;
    color: rgba(245,158,11,.95);
    display:flex; gap:10px; align-items:flex-start;
    font-size: 13px;
    line-height: 1.35;
}

/* ALERT MODAL */
.alert-modal{
    display:none;
    position:fixed; inset:0;
    background: rgba(0,0,0,.84);
    z-index:10000;
    align-items:center; justify-content:center;
    padding: 18px;
    backdrop-filter: blur(8px);
}
.alert-modal-content{
    width:min(560px, 100%);
    background: rgba(18,26,38,.92);
    border:1px solid var(--border2);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow:hidden;
}
.alert-top{
    padding: 16px 16px 12px 16px;
    display:flex; align-items:center; gap:12px;
    border-bottom: 1px solid var(--border);
}
.alert-icon{
    width:44px;height:44px;border-radius: 12px;
    display:grid;place-items:center;
    background: rgba(239,68,68,.12);
    border:1px solid rgba(239,68,68,.22);
    color: var(--red);
    font-size: 18px;
}
.alert-top h3{font-size: 16px; font-weight: 900; letter-spacing:.2px; flex:1;}
.alert-close-btn{
    background: transparent;
    border:1px solid var(--border);
    color: rgba(229,231,235,.85);
    width:40px;height:40px;
    border-radius: 12px;
    cursor:pointer;
}
.alert-close-btn:hover{ background: rgba(255,255,255,.06); }
.alert-body{ padding: 14px 16px 16px 16px; }
#alertMessage{ font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.alert-warning{
    background: rgba(245,158,11,.08);
    border:1px solid rgba(245,158,11,.22);
    border-radius: 12px;
    padding: 10px 12px;
    color: rgba(245,158,11,.95);
    font-size: 13px;
    line-height: 1.35;
}
.alert-actions{
    padding: 0 16px 16px 16px;
    display:grid; grid-template-columns: 1fr 1fr; gap:10px;
}
.alert-btn{
    border:none; border-radius: 12px;
    padding: 12px 12px;
    font-weight: 900;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.alert-cancel{ background: rgba(148,163,184,.14); color: var(--text); border:1px solid var(--border); }
.alert-cancel:hover{ background: rgba(148,163,184,.20); }
.alert-confirm{ background: rgba(239,68,68,.95); color: #111827; }
.alert-confirm:hover{ filter: brightness(1.02); }
.alert-footer{
    padding: 12px 16px 16px 16px;
    border-top:1px solid var(--border);
    color: rgba(154,164,178,.95);
    font-size: 12px;
    display:flex; gap:8px; align-items:center; justify-content:center;
}

/* CALCULATOR MODAL (NO BLUR) */
#calculatorModal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 10001;
    background: rgba(0,0,0,.45);
    backdrop-filter: none;
    padding: 16px;
}
#calculatorModal.open{ display: block; }
#calculatorModal .calculator-wrap{
    width: min(420px, 100%);
    margin: auto;
    margin-top: 90px;
    border-radius: 16px;
    border: 1px solid var(--border2);