/* ═══════════════════════════════════════════════════
   SPEEDY MASTER — TYPING CSS
═══════════════════════════════════════════════════ */
:root{
    --spt-primary:#1e3a8a; --spt-accent:#3b82f6; --spt-success:#10b981;
    --spt-error:#ef4444; --spt-extra:#d97706; --spt-missed:#64748b;
    --spt-bg:#f1f5f9; --spt-border:#e2e8f0;
}
*{ box-sizing:border-box; }

/* ── FONT DECLARATIONS ── */
@font-face {
    font-family:'Krutidev010';
    src:url('/wp-content/plugins/speedy-shorthand/assets/fonts/KRDEV010.TTF') format('truetype');
    font-weight:normal; font-style:normal; font-display:swap;
}
.font-krutidev{ font-family:'Krutidev010',monospace !important; line-height:1.8 !important; }
.font-mangal  { font-family:'Mangal','Noto Sans Devanagari',serif !important; line-height:1.8 !important; }
.font-english { font-family:'Segoe UI',Arial,sans-serif !important; line-height:1.8 !important; }

/* ── OUTER WRAP ── */
.spt-outer{
    font-family: 'Segoe UI', sans-serif;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 99999 !important;
    background: #f8fafc !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
}
/* ── Result panel: scrollable, fills outer ── */
.spt-result-wrap {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0;
    padding: 0;
}

/* ── CONTROL BAR ── */
.spt-ctrl-bar{
    background: linear-gradient(135deg, #0f1b4c, #1a2f7a);
    border-radius: 0; padding: 6px 16px;
    width: 100%; box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    min-height: 44px;
    flex-shrink: 0;   /* don't shrink in flex-column layout */
}
/* When test is running, ctrl-bar collapses to nothing */
.spt-ctrl-bar.spt-running-mode {
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: 0 !important;
}
.spt-ctrl-left { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-start; }
.spt-ctrl-right{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

/* ── BUTTONS ── */
.spt-btn{
    padding:5px 14px; border-radius:5px; font-weight:700; font-size:.78rem;
    cursor:pointer; border:none; transition:all .18s; height:30px;
    display:inline-flex; align-items:center; justify-content:center;
    letter-spacing:.3px; text-transform:uppercase;
}
.spt-btn:active{ transform:scale(.93); }
.spt-btn-start { background:linear-gradient(135deg,#10b981,#059669); color:#fff;
    box-shadow:0 3px 10px rgba(16,185,129,.3); animation:sptPulseGreen 2s infinite;
    font-size:.88rem; height:34px; padding:0 20px; }
/* FIX: tool buttons — explicit size so A+/A- work visually */
.spt-btn-tool  { background:#fff; border:1.5px solid var(--spt-border); color:var(--spt-primary);
    width:34px; height:30px; padding:0; font-size:.82rem; font-weight:900; }
.spt-btn-tool:hover{ background:var(--spt-bg); border-color:var(--spt-primary); }
.spt-btn-pause  { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
.spt-btn-submit { background:#ef4444; color:#fff; font-size:.88rem; }
.spt-btn-exam   { background: rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.3); }
.spt-btn-reattempt{ background:#475569; color:#fff; padding:10px 22px; font-size:.88rem; height:auto; }
.spt-btn-print  { background:linear-gradient(135deg,#1e3a8a,#3b82f6); color:#fff; padding:10px 22px; font-size:.88rem; height:auto; }
.spt-btn-close  { background:linear-gradient(135deg,#991b1b,#dc2626); color:#fff; padding:10px 22px; font-size:.88rem; height:auto; }

@keyframes sptPulseGreen{
    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); }
}

/* ── TIMER ── */
.spt-timer{
    font-size:1.2rem; font-weight:900; color:var(--spt-primary);
    font-variant-numeric:tabular-nums; padding:0 12px;
    border-left:2px solid var(--spt-accent); border-right:2px solid var(--spt-accent);
    line-height:30px;
}

/* ── AUTO-START COUNTDOWN BANNER ── */
.spt-autostart-banner{
    background:linear-gradient(135deg,#fef3c7,#fffbeb);
    border:1.5px solid #f59e0b;
    border-radius:0;
    padding:14px 20px;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:10px;
}
.spt-autostart-msg{ font-size:.92rem; font-weight:700; color:#92400e; }
.spt-autostart-cd{ font-size:1.4rem; font-weight:900; color:#d97706;
    font-variant-numeric:tabular-nums; min-width:60px; text-align:right; }
.spt-autostart-manual{ background:#f97316; color:#fff; border:none;
    padding:7px 16px; border-radius:6px; font-size:.8rem; font-weight:800;
    cursor:pointer; transition:all .18s; }
.spt-autostart-manual:hover{ filter:brightness(1.1); }

/* ── PROGRESS BAR ── */
.spt-prog-bar{ height:5px; background:rgba(255,255,255,.2); border-radius:0; overflow:hidden; flex-shrink:0; }
.spt-prog-fill{ height:100%; width:0%; background:#22d3ee; transition:width .3s ease,background .5s;
    display:flex; align-items:center; justify-content:center; min-width:0; }
.spt-prog-pct{ color:#fff; font-size:.68rem; font-weight:800; }

/* ── MAIN GRID — stacked, identical sizes ── */
.spt-main-grid{
    display: flex; flex-direction: column;
    border: none; background: #f8fafc;
    flex: 1; overflow: hidden;
    min-height: 0;
    width: 100%;
}
.spt-box-wrap{
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    overflow: hidden;
    background: #f8fafc;
    border: none;
    padding-bottom: 8px;
}
.spt-box-wrap + .spt-box-wrap{ border-top: 1.5px solid #e2e8f0; }
/* border handled in .spt-box-wrap + .spt-box-wrap above */
.spt-box-lbl{
    font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px;
    color: #475569; padding: 6px 16px; background: #f0f4f8;
    border-bottom: 1px solid #e2e8f0; font-family: 'Segoe UI',sans-serif !important;
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}

/* ── TEXT & TYPE BOXES: fill their container segment fully ── */
.spt-ref-box,
.spt-type-box{
    /* Centered with max-width — fills available height via flex */
    width: 88% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;        /* horizontal centering */
    flex: 1 !important;
    min-height: 80px !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 6px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1.85 !important;
    color: #1e293b !important;
    text-align: justify !important;
    text-justify: inter-word;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
    word-break: normal;
    overflow-wrap: break-word;
    display: block !important;
    scroll-behavior: smooth;
}
.spt-type-box{
    border-color: #3b5bdb !important;
    border-radius: 8px !important;
    resize: none; outline: none !important;
    background: #fffef5 !important;
    cursor: text;
}
.spt-type-box:focus{
    border-color:var(--spt-primary) !important;
    box-shadow:0 0 0 4px rgba(59,130,246,.1);
}
.spt-type-box:disabled{
    background:#f1f5f9 !important; cursor:not-allowed;
    border-color:#cbd5e1 !important;
}

/* ── SHORTHAND MODE — type box fills full height ── */
.spt-shorthand-mode .spt-type-box {
    /* Height leaves room for: ref-stripe(44px) + type-lbl(28px) + submit-stripe(52px) + margins */
    height: calc(100vh - 200px) !important;
    flex: none !important;
    min-height: 120px !important;
    max-height: calc(100vh - 200px) !important;
}

/* ── HIGHLIGHT CLASSES ── */
.hl-active{ background:#fef08a; color:#000; border-radius:3px; display:inline-block; padding:0 2px; }
.hl-error { background:#fecaca; color:#dc2626; text-decoration:underline; border-radius:3px; }
.char{ display:inline; }
.char-correct{ background:#dcfce7; color:#166534; }
.char-wrong  { background:#fee2e2; color:#991b1b; }

/* ── BEGIN CARD ── */
.spt-begin-wrap{ display:flex; align-items:center; justify-content:center; padding:40px 16px; }
.spt-begin-card{ background:#fff; border:1.5px solid var(--spt-border); border-radius:16px;
    padding:32px 36px; text-align:center; max-width:440px; width:100%;
    box-shadow:0 8px 32px rgba(109,40,217,.12); }
.spt-begin-icon { font-size:2.4rem; margin-bottom:10px; }
.spt-begin-title{ font-size:1.15rem; font-weight:900; color:#1e293b; margin-bottom:6px; }
.spt-begin-cat  { font-size:.8rem; font-weight:700; color:#7c3aed; background:#ede9fe;
    display:inline-block; padding:3px 12px; border-radius:20px; margin-bottom:12px; }
.spt-begin-meta { display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
    font-size:.8rem; font-weight:700; color:#64748b; margin-bottom:20px; }
.spt-begin-btn  { background:linear-gradient(135deg,#6d28d9,#7c3aed); color:#fff; border:none;
    padding:12px 32px; border-radius:50px; font-size:.94rem; font-weight:800; cursor:pointer;
    box-shadow:0 6px 20px rgba(109,40,217,.35); transition:all .22s; }
.spt-begin-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }

/* ── RESULT WRAP — wider ── */
.spt-result-wrap{ margin-top:0; }
.spt-result-paper{
    background:#fff; border:1.5px solid var(--spt-border); border-radius:10px;
    padding:24px 32px; position:relative; overflow:hidden;
    max-width:100%; width:98%; margin:16px auto;
}
.spt-watermark{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-30deg);
    font-size:5rem; font-weight:900; color:rgba(0,0,0,.04);
    pointer-events:none; white-space:nowrap; user-select:none;
}
.spt-res-header{ text-align:center; border-bottom:2px solid var(--spt-primary); padding-bottom:10px; margin-bottom:14px; }
.spt-res-header h1{ margin:0; font-size:1.6rem; color:var(--spt-primary); font-family:'Segoe UI',sans-serif !important; }
.spt-section-title{ text-decoration:underline; text-align:center; margin:18px 0 10px; font-size:1.1rem; font-family:'Segoe UI',sans-serif !important; }

/* Info row */
.spt-res-info-row{ display:flex; flex-wrap:wrap; border:1.5px solid var(--spt-border); border-radius:8px; overflow:hidden; margin-bottom:16px; }
.spt-res-info-item{ flex:1; min-width:140px; padding:10px 14px; border-right:1px solid var(--spt-border); display:flex; flex-direction:column; align-items:center; text-align:center; }
.spt-res-info-item:last-child{ border-right:none; }
.spt-ril{ font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#94a3b8; margin-bottom:3px; font-family:'Segoe UI',sans-serif !important; }
.spt-riv{ font-size:.9rem; font-weight:800; color:#1e293b; font-family:'Segoe UI',sans-serif !important; }

/* Stats grid — wider */
.spt-res-stats-grid{
    width:90%; margin:10px auto 16px; display:grid; grid-template-columns:repeat(4,1fr);
    gap:1px; background:var(--spt-border); border-radius:8px; overflow:hidden;
}
.spt-rs{ background:#fff; padding:14px 10px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.spt-rsl{ font-weight:700; color:#64748b; font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; font-family:'Segoe UI',sans-serif !important; }
.spt-rsv{ font-weight:900; color:#1e293b; font-size:1.2rem; font-family:'Segoe UI',sans-serif !important; }
.spt-rs-full{ grid-column:span 4; }

/* Category boxes — wider */
.spt-result-mode-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin: 10px auto;
    width: 95%;
    flex-wrap: wrap;
}
.spt-rmode-lbl { font-size: .85rem; font-weight: 600; color: #374151; margin-right: 4px; }
.spt-rmode-btn {
    padding: 6px 16px;
    border-radius: 7px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    font-size: .82rem;
    cursor: pointer;
    color: #475569;
    font-weight: 600;
    transition: all .15s;
}
.spt-rmode-btn.active { background: #1e40af; border-color: #1e40af; color: #fff; }
.spt-rmode-btn:hover:not(.active) { background: #f1f5f9; }

.spt-res-cat{ border:1.5px solid var(--spt-border); border-radius:8px; overflow:hidden; margin-bottom:16px; width:90%; margin-left:auto; margin-right:auto; }
.spt-res-cat-lbl{ padding:11px 16px; font-weight:800; font-size:.85rem; text-transform:uppercase; letter-spacing:.3px; text-align:center; font-family:'Segoe UI',sans-serif !important; }
.spt-res-cat-orange .spt-res-cat-lbl{ background:#f97316; color:#fff; }
.spt-res-cat-blue   .spt-res-cat-lbl{ background:#2563eb; color:#fff; }
.spt-res-cat-green  { border-left-color:#16a34a; }
.spt-res-cat-green  .spt-res-cat-lbl{ background:#16a34a; color:#fff; }

/* Methods */
.spt-methods-flex{ display:flex; gap:0; flex-wrap:wrap; }
.spt-method-sec{ flex:1; padding:14px 16px; border-right:1px solid var(--spt-border); }
.spt-method-sec:last-child{ border-right:none; }
.spt-method-title{ font-weight:800; font-size:.88rem; color:#334155; margin-bottom:10px; font-family:'Segoe UI',sans-serif !important; border-bottom:2px solid var(--spt-border); padding-bottom:6px; }
.spt-method-sub{ font-weight:400; font-size:.75rem; color:#64748b; }
.spt-detail-grid{ display:grid; grid-template-columns:auto 1fr; gap:5px 10px; font-size:.88rem; }
.spt-dgl{ color:#64748b; font-weight:600; font-family:'Segoe UI',sans-serif !important; }
.spt-dgv{ font-weight:800; color:#1e293b; font-family:'Segoe UI',sans-serif !important; }

/* AHC table */
.spt-ahc-table{ width:100%; border-collapse:collapse; font-size:.88rem; table-layout:fixed; }
.spt-ahc-table th{ background:var(--spt-primary); color:#fff; padding:10px 14px; text-align:center; border:1px solid #1e3a8a; font-family:'Segoe UI',sans-serif !important; }
.spt-ahc-table td{ padding:14px; border:1px solid var(--spt-border); vertical-align:top; }
.spt-ahc-row{ display:flex; justify-content:space-between; font-size:.88rem; margin-bottom:7px; border-bottom:1px dashed var(--spt-border); padding-bottom:4px; font-family:'Segoe UI',sans-serif !important; gap:8px; }
.spt-ahc-row:last-child{ border-bottom:none; }
.spt-ahc-row span{ color:#64748b; white-space:nowrap; }
.spt-ahc-row b{ color:#1e293b; text-align:right; }
.spt-ahc-status-cell{ background:#f8fafc; text-align:center; padding:20px !important; }

/* ── COMPARISON BOXES — NO SCROLL, full stretch ── */
.spt-cmp-container{
    display:flex; gap:0; width:98%; margin:10px auto;
    border:2px solid #94a3b8; border-radius:12px; overflow:hidden;
    align-items:stretch;
}
.spt-cmp-half{ flex:1; min-width:0; display:flex; flex-direction:column; background:#fff; }
.spt-cmp-half:first-child{ border-right:2px solid #94a3b8; }
.spt-cmp-hdr{
    margin:0; padding:14px; background:#f1f5f9; color:var(--spt-primary);
    text-align:center; font-weight:800; font-size:.85rem; text-transform:uppercase;
    letter-spacing:1px; border-bottom:2px solid #94a3b8;
    font-family:'Segoe UI',Arial,sans-serif !important;
}
.spt-cmp-box{
    padding:18px; font-size:1.1rem; line-height:1.8;
    text-align:justify; text-justify:inter-word;
    word-break:break-word; overflow:visible; height:auto;
}

/* Comparison text colors */
.cmp-correct-text { color:#10b981; }
.cmp-correct-text.ref{ color:#10b981; }
.cmp-wrong-text { color:#ef4444; text-decoration:underline; }
.cmp-wrong-text.ref{ color:#ef4444; }
.cmp-correction-text{ color:#10b981; font-weight:700; background:#dcfce7; border-radius:3px; padding:0 3px; margin-right:2px; }
.cmp-extra-text { color:#d97706; border-bottom:2px solid #d97706; background:#fef9c3; }
.cmp-skipped-text{ color:#64748b; text-decoration:line-through; background:#f1f5f9; padding:0 2px; }
.ref-not-typed{ color:#cbd5e1; opacity:.5; }

/* Legend */
.spt-legend{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:12px; }
.spt-leg{ padding:3px 12px; border-radius:4px; font-size:.78rem; font-weight:700; font-family:'Segoe UI',sans-serif !important; }
.spt-leg-correct{ background:#dcfce7; color:#166534; }
.spt-leg-wrong  { background:#fee2e2; color:#991b1b; }
.spt-leg-extra  { background:#fef9c3; color:#854d0e; }
.spt-leg-skip   { background:#f3f4f6; color:#374151; text-decoration:line-through; }
.spt-leg-corr   { background:#dcfce7; color:#166534; font-weight:900; }

/* Actions */
.spt-res-actions{ display:flex; justify-content:space-between; gap:14px; margin-top:20px; padding-top:16px; border-top:1.5px solid var(--spt-border); flex-wrap:wrap; align-items:center; }

/* ── EXAM MODE ── */
.spt-exam-active .spt-ctrl-right{ display:none !important; }
/* Float exit button — visible even when ctrl-right is hidden */
/* spt-float-exit-btn removed — exam button stays in ref stripe */
/* Fix 7: Increase text boxes width by 10% (65% → 75%) */

/* ── MOBILE ── */
@media(max-width:768px){
    /* Text boxes: 97% on mobile */
    .spt-ref-box,
    .spt-type-box{
        width:97% !important; max-width:100% !important;
        height:220px !important; font-size:1.1rem !important;
        border-radius:5px !important; margin:4px auto !important;
    }
    .spt-shorthand-mode .spt-type-box{ height:calc(100vh - 280px) !important; max-height:240px !important; min-height:100px !important; }

    /* Stats */
    .spt-res-stats-grid{ grid-template-columns:repeat(2,1fr); width:100%; }
    .spt-rs-full{ grid-column:span 2; }
    .spt-res-cat{ width:100%; }
    .spt-methods-flex{ flex-direction:column; }
    .spt-method-sec{ border-right:none; border-bottom:1px solid var(--spt-border); }

    /* AHC table mobile: use proper 2-column layout, NOT block display */
    .spt-ahc-table{ table-layout:auto; }
    .spt-ahc-table th,
    .spt-ahc-table td{ padding:10px 8px; font-size:.82rem; }
    .spt-ahc-row{ flex-direction:column; gap:2px; }
    .spt-ahc-row span{ font-size:.72rem; }
    .spt-ahc-row b{ font-size:.88rem; }

    /* Mobile comparison: single merged box */
    .spt-cmp-container{ flex-direction:column; width:100%; margin:10px 0; border-radius:8px; }
    .spt-cmp-half:first-child{ border-right:none; border-bottom:none; }
    /* Hide the separate halves on mobile; show merged box */
    .spt-cmp-half{ display:none; }
    .spt-cmp-merged{
        display:block !important;
        background:#fff;
        border:2px solid #94a3b8;
        border-radius:8px;
        overflow:hidden;
        width:100%;
        margin:10px 0;
    }
    .spt-cmp-merged-hdr{
        padding:12px 14px; background:#f1f5f9; color:var(--spt-primary);
        text-align:center; font-weight:800; font-size:.82rem; text-transform:uppercase;
        letter-spacing:.8px; border-bottom:2px solid #94a3b8;
        font-family:'Segoe UI',sans-serif !important;
    }
    .spt-cmp-merged-body{
        padding:14px; font-size:1rem; line-height:2;
        word-break:break-word;
    }

    .spt-res-info-item{ flex:1 1 45%; border-bottom:1px solid var(--spt-border); }
    .spt-ctrl-bar{ border-radius:0; }
    .spt-timer{ font-size:1rem; padding:0 8px; }
    .spt-btn{ font-size:.72rem; padding:4px 10px; }
    .spt-btn-start{ font-size:.8rem; padding:0 14px; }
    .spt-res-actions{ flex-direction:column; align-items:center; }
    .spt-btn-reattempt,.spt-btn-print{ width:90%; justify-content:center; }
    .spt-result-paper{ padding:14px 10px; }
    .spt-cmp-box{ font-size:1rem; padding:14px; }
}

/* On desktop: hide merged box */
@media(min-width:769px){
    .spt-cmp-merged{ display:none !important; }
    .spt-cmp-half{ display:flex !important; }
}

@media(max-width:480px){
    .spt-res-stats-grid{ grid-template-columns:1fr 1fr; }
    .spt-rs-full{ grid-column:span 2; }
}

/* ── PRINT / PDF ── */
@media print {
    /* Reset margins */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
    /* Hide everything except result */
    body > * { display: none !important; }
    /* Show the result wrap wherever it is nested */
    .spt-result-wrap,
    .spt-result-wrap * {
        display: revert !important;
        visibility: visible !important;
    }
    .spt-result-wrap {
        display: block !important;
        position: static !important;
        width: 100% !important;
        background: #fff !important;
    }
    /* When body has spt-printing class, walk the ancestor chain */
    body.spt-printing > * { display: none !important; }
    body.spt-printing .spt-result-wrap { display: block !important; }
    /* Hide admin bar and nav */
    #wpadminbar, .ssd-panel, .spt-ctrl-bar, .spt-prog-bar,
    .spt-main-grid, .spt-begin-wrap, .spt-autostart-banner,
    .no-print, .spt-res-actions { display: none !important; }
    /* Result paper */
    .spt-result-paper {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        page-break-inside: auto;
    }
    /* Keep comparison side by side */
    .spt-cmp-container { display: flex !important; flex-direction: row !important; }
    .spt-cmp-half { display: flex !important; flex: 1 !important; flex-direction: column !important; }
    .spt-cmp-merged { display: none !important; }
    /* Grid — full width in print */
    .spt-res-stats-grid { grid-template-columns: repeat(4,1fr) !important; width: 100% !important; gap: 4px !important; }
    .spt-rs { padding: 4px 6px !important; }
    .spt-rsl { font-size: .72rem !important; }
    .spt-res-cat { width: 100% !important; margin-bottom: 6px !important; }
    .spt-res-cat-lbl { padding: 4px 10px !important; font-size: .82rem !important; }
    .spt-ahc-row { padding: 2px 0 !important; font-size: .77rem !important; }
    .spt-methods-flex { gap: 0 !important; }
    .spt-method-sec { padding: 4px 8px !important; }
    .spt-detail-grid { font-size: .75rem !important; gap: 1px 6px !important; }
    /* Colours */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    /* Avoid breaking rows */
    .spt-ahc-row, .spt-rs { page-break-inside: avoid; }
    .spt-watermark { display: block !important; }
}


/* ── RESULT PAPER — wider ── */
.spt-result-paper {
    max-width: 1400px !important;
    width: 98% !important;
    margin: 16px auto !important;
}
.spt-res-stats-grid {
    width: 95% !important;
}
.spt-res-cat {
    width: 95% !important;
}

/* ── TEXT/TYPE BOXES — 65% on PC ── */
.spt-ref-box,
.spt-type-box {
    width: 65% !important;
    max-width: 1100px !important;
}
@media (max-width: 768px) {
    .spt-ref-box,
    .spt-type-box {
        width: 97% !important;
        max-width: 100% !important;
    }
    .spt-result-paper { width: 100% !important; padding: 12px 8px !important; margin: 0 !important; }
    .spt-res-stats-grid { width: 100% !important; }
    .spt-res-cat { width: 100% !important; }
}

/* ── AUTOSTART BANNER ── */
.spt-autostart-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1.5px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 20px;
    margin: 10px 0;
}
.spt-autostart-msg {
    font-size: .9rem;
    font-weight: 700;
    color: #92400e;
}
.spt-autostart-cd {
    font-size: 1.6rem;
    font-weight: 900;
    color: #b45309;
    font-variant-numeric: tabular-nums;
    min-width: 70px;
    text-align: center;
}
.spt-autostart-manual {
    background: #f59e0b;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: .84rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .18s;
}
.spt-autostart-manual:hover { background: #d97706; }

/* ── EXAM TABLE — 2 columns on mobile ── */
@media (max-width: 768px) {
    /* Make AHC table rows show as 2-column grid on mobile */
    .spt-ahc-table thead { display: none; }
    .spt-ahc-table tbody tr:first-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }
    .spt-ahc-table tbody tr:first-child td {
        display: block !important;
        width: 100% !important;
    }
    /* Status row: full width */
    .spt-ahc-status-cell {
        display: block !important;
        width: 100% !important;
        grid-column: span 2;
    }
}

/* ── MERGED COMPARISON BOX — mobile only ── */
.spt-cmp-merged {
    display: none; /* hidden on desktop */
    border: 2px solid #94a3b8;
    border-radius: 12px;
    overflow: hidden;
    width: 95%;
    margin: 10px auto;
}
.spt-cmp-merged-hdr {
    padding: 14px;
    background: #f1f5f9;
    color: #1e3a8a;
    text-align: center;
    font-weight: 800;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #94a3b8;
}
.spt-cmp-merged-body {
    padding: 18px;
    font-size: 1.05rem;
    line-height: 2;
    text-align: justify;
    word-break: break-word;
}

@media (max-width: 768px) {
    /* On mobile: hide side-by-side, show merged */
    .spt-cmp-container { display: none !important; }
    .spt-cmp-merged    { display: block !important; }
    .spt-cmp-merged    { width: 100%; border-radius: 0; border-left: none; border-right: none; margin: 8px 0; }
    .spt-cmp-merged-body { font-size: .95rem; padding: 14px; }
}


/* ── MISTAKE TYPE BREAKDOWN — word-level display ── */
.spt-mkerr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 92%;
    margin: 12px auto 20px;
}
.spt-mkerr-box {
    border-radius: 12px;
    border: 1.5px solid;
    overflow: hidden;
}
.spt-mkerr-space { background: #faf5ff; border-color: #c4b5fd; }
.spt-mkerr-punct { background: #fffbeb; border-color: #fcd34d; }
.spt-mkerr-half  { background: #eff6ff; border-color: #93c5fd; }
.spt-mkerr-full  { background: #fef2f2; border-color: #fca5a5; }

/* header row: icon + label + count badge */
.spt-mkerr-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.spt-mkerr-space .spt-mkerr-head { background: #ede9fe; }
.spt-mkerr-punct .spt-mkerr-head { background: #fef9c3; }
.spt-mkerr-half  .spt-mkerr-head { background: #dbeafe; }
.spt-mkerr-full  .spt-mkerr-head { background: #fee2e2; }
.spt-mkerr-ico {
    font-size: 1rem;
    font-weight: 900;
    min-width: 20px;
    text-align: center;
}
.spt-mkerr-space .spt-mkerr-ico { color: #7c3aed; }
.spt-mkerr-punct .spt-mkerr-ico { color: #d97706; }
.spt-mkerr-half  .spt-mkerr-ico { color: #2563eb; }
.spt-mkerr-full  .spt-mkerr-ico { color: #dc2626; }
.spt-mkerr-lbl {
    flex: 1;
    font-size: .73rem;
    font-weight: 800;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.spt-mkerr-count {
    font-size: .82rem;
    font-weight: 900;
    background: rgba(0,0,0,.08);
    border-radius: 20px;
    padding: 1px 9px;
    min-width: 24px;
    text-align: center;
}
.spt-mkerr-space .spt-mkerr-count { color: #7c3aed; }
.spt-mkerr-punct .spt-mkerr-count { color: #d97706; }
.spt-mkerr-half  .spt-mkerr-count { color: #2563eb; }
.spt-mkerr-full  .spt-mkerr-count { color: #dc2626; }

/* word chips area */
.spt-mkerr-words {
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 38px;
}
.spt-mkerr-word {
    display: inline-block;
    background: rgba(0,0,0,.06);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: .77rem;
    font-weight: 600;
    color: #1e293b;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}
.spt-mkerr-none {
    font-size: .74rem;
    color: #94a3b8;
    font-style: italic;
    padding: 4px 2px;
}
@media(max-width:600px) {
    .spt-mkerr-grid { grid-template-columns: 1fr; width: 100%; }
}

.spt-mkerr-cap { background:#f3e8ff; border-color:#c084fc; }
.spt-mkerr-cap .spt-mkerr-head { background:#e9d5ff; }
.spt-mkerr-cap .spt-mkerr-ico  { color:#7c3aed; }

/* ── Mistake breakdown two-column layout ── */
.spt-mkerr-two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:12px; }
.spt-mkerr-col { display:flex; flex-direction:column; gap:6px; }
.spt-mkerr-col-hdr { font-size:.78rem; font-weight:800; padding:6px 10px; border-radius:8px 8px 0 0; text-align:center; margin-bottom:-2px; }
.spt-mkerr-formula { background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:8px; padding:10px 14px; font-size:.78rem; color:#475569; margin-top:10px; line-height:1.7; }
@media(max-width:600px){ .spt-mkerr-two-col { grid-template-columns:1fr; } }


/* ── FULLSCREEN EXAM INTERFACE (when launched from LMS course view) ── */
.spt-outer.spt-fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
    background: #f8fafc !important;
    margin: 0 !important;
    transform: none !important;
}
.spt-outer.spt-fullscreen-mode .spt-ref-box,
.spt-outer.spt-fullscreen-mode .spt-type-box {
    width: 96% !important;
    height: calc(44vh - 20px) !important;
    max-width: none !important;
}
.spt-outer.spt-fullscreen-mode .spt-main-grid {
    min-height: calc(100vh - 60px);
}
.spt-outer.spt-fullscreen-mode .spt-ctrl-bar {
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* ── STANDALONE EXERCISE BAR (back button, title) ── */
.slms-standalone-ex-bar {
    position: sticky;
    top: 0;
    z-index: 1000000;
    background: linear-gradient(135deg, #1e3a8a, #6d28d9);
    color: #fff;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.slms-standalone-ex-bar-left { display: flex; align-items: center; gap: 10px; }
.slms-standalone-ex-title    { font-weight: 800; font-size: .92rem; color: #fff; }
.slms-standalone-ex-sub      { font-size: .76rem; opacity: .78; }
.slms-standalone-ex-back-btn {
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.3);
    color: #fff;
    border-radius: 7px;
    padding: 5px 14px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.slms-standalone-ex-back-btn:hover { background: rgba(255,255,255,.25); color: #fff; }


/* ── BOTTOM ACTION BAR (Image 2 style: Cancel left, Submit right) ── */
.spt-action-bar {
    background: #fff;
    border-top: 2px solid #e2e8f0;
    padding: 10px 20px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; bottom: 0; z-index: 50;
}
.spt-action-bar .spt-btn-stop {
    background: #e63946 !important; color: #fff !important;
    border: none !important; padding: 10px 28px !important;
    border-radius: 10px !important; font-size: .92rem !important;
    font-weight: 900 !important; cursor: pointer !important;
}
.spt-action-bar .spt-btn-submit {
    background: #6b7280 !important; color: #fff !important;
    border: none !important; padding: 10px 28px !important;
    border-radius: 10px !important; font-size: .92rem !important;
    font-weight: 900 !important; cursor: pointer !important;
}
.spt-action-bar .spt-btn-submit[data-active="1"] {
    background: linear-gradient(135deg,#1e3a8a,#3b5bdb) !important;
}

/* ── MAIN GRID BACKGROUND ── */
.spt-main-grid {
    background: #f8fafc;
}

/* ── OUTER wrapper ── */
.spt-outer {
    background: #f8fafc;
}

/* Type box gets cream background (Image 2 style) */
.spt-type-box {
    background: #fefce8 !important;
    border: 1.5px solid #3b5bdb !important;
}

/* ── CTRL-BAR DIRECT CHILDREN ── */
.spt-ctrl-left {
    display: flex; align-items: center; gap: 6px;
    justify-content: flex-start;
}
.spt-ctrl-center {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
}
.spt-ctrl-right {
    display: flex; align-items: center; gap: 6px;
    justify-content: flex-end;
}

/* Timer */
.spt-timer-label {
    font-size: .58rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: rgba(255,255,255,.7); font-weight: 700; margin-bottom: 2px;
}
.spt-timer {
    font-size: 1.35rem; font-weight: 900; color: #fff;
    font-variant-numeric: tabular-nums; letter-spacing: 2px;
    border: none; padding: 0; line-height: 1;
}

/* Submit bar below type box */
.spt-submit-bar {
    display: none;
    justify-content: flex-end;
    padding: 8px 3%;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.spt-submit-main {
    background: linear-gradient(135deg, #1e3a8a, #3b5bdb) !important;
    color: #fff !important; border: none !important;
    padding: 9px 32px !important; border-radius: 8px !important;
    font-size: .92rem !important; font-weight: 900 !important;
    cursor: pointer !important; letter-spacing: .5px;
}

/* ── GLOBAL: hide site header/footer when typing is active ── */
/* When exam active: hide scrollbar on body */
body.spt-exam-active-body { overflow: hidden !important; }

body.spt-exam-active-body header,
body.spt-exam-active-body #header,
body.spt-exam-active-body .site-header,
body.spt-exam-active-body #masthead,
body.spt-exam-active-body footer,
body.spt-exam-active-body #footer,
body.spt-exam-active-body .site-footer,
body.spt-exam-active-body #wpadminbar,
body.spt-exam-active-body nav.main-navigation {
    display: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   REFERENCE STRIPE — holds all controls during test
   Layout: [A+ A− label | TIMER (center) | Pause | Exam Mode]
══════════════════════════════════════════════════════════════════ */
.spt-ref-stripe {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: linear-gradient(135deg, #0f1b4c, #1e3a8a);
    padding: 7px 14px;
    gap: 8px;
    min-height: 44px;
    flex-shrink: 0;
}
.spt-stripe-left {
    display: flex; align-items: center; gap: 8px;
    justify-content: flex-start;
}
.spt-stripe-lbl {
    font-size: .65rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.2px; color: rgba(255,255,255,.75);
    white-space: nowrap;
}
.spt-stripe-center {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
}
.spt-stripe-right {
    display: flex; align-items: center; gap: 6px;
    justify-content: flex-end;
}

/* Timer on reference stripe */
.spt-timer-label {
    font-size: .6rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: #fde047 !important; font-weight: 800; margin-bottom: 2px; opacity: .85;
}
.spt-timer {
    font-size: 1.4rem; font-weight: 900;
    color: #fde047 !important; /* bright yellow on dark navy */
    font-variant-numeric: tabular-nums; letter-spacing: 3px; line-height: 1;
    border: none; padding: 0;
    text-shadow: 0 0 8px rgba(253,224,71,.5), 0 1px 4px rgba(0,0,0,.4);
}

/* Tool buttons on dark stripe */
.spt-btn-tool {
    background: rgba(255,255,255,.18) !important;
    border: 1.5px solid rgba(255,255,255,.3) !important;
    color: #fff !important;
    width: 30px; height: 28px; padding: 0; font-size: .78rem; font-weight: 900;
}
.spt-btn-tool:hover { background: rgba(255,255,255,.32) !important; }

/* Pause button on stripe */
.spt-btn-pause {
    background: linear-gradient(135deg,#f59e0b,#d97706) !important;
    color: #fff !important; font-size: .76rem !important;
    padding: 4px 10px !important; height: 28px !important;
}

/* Exam mode button on stripe */
.spt-btn-exam {
    background: rgba(109,40,217,.7) !important;
    border: 1.5px solid rgba(255,255,255,.25) !important;
    color: #fff !important; font-size: .76rem !important;
    padding: 4px 10px !important; height: 28px !important;
}

/* ══ BOTTOM SUBMIT STRIPE ══ */
.spt-submit-stripe {
    display: none; /* shown by JS when test starts */
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-top: 2px solid #e2e8f0;
    padding: 10px 6%;
    /* Safe area for mobile browser bottom bar (home indicator etc.) */
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    gap: 12px;
    flex-shrink: 0 !important;
    position: relative;
    z-index: 10;
    /* Minimum height so buttons are always reachable */
    min-height: 52px;
}
.spt-submit-stripe-left {
    display: flex; align-items: center; gap: 10px;
}
.spt-submit-stripe-right {
    display: flex; align-items: center; gap: 8px;
}
.spt-submit-hint {
    font-size: .72rem; color: #94a3b8; font-style: italic;
}
.spt-btn-cancel {
    background: #ef4444 !important;
    border: none !important;
    color: #fff !important;
    font-size: .84rem !important; font-weight: 800 !important;
    padding: 9px 22px !important; border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(239,68,68,.3) !important;
}
.spt-btn-cancel:hover { background: #dc2626 !important; opacity:.92; }
.spt-btn-submit-main {
    background: linear-gradient(135deg, #1e3a8a, #3b5bdb) !important;
    color: #fff !important; border: none !important;
    font-size: .88rem !important; font-weight: 900 !important;
    padding: 9px 28px !important; border-radius: 8px !important;
    cursor: pointer !important; letter-spacing: .3px;
    box-shadow: 0 4px 14px rgba(30,58,138,.3) !important;
}
.spt-btn-submit-main:hover { opacity: .92; }

/* ══ TOP CTRL-BAR (simplified: just START button) ══ */
.spt-ctrl-bar {
    background: linear-gradient(135deg, #0f1b4c, #1a2f7a);
    padding: 8px 16px;
    width: 100vw !important; max-width: 100vw !important;
    margin: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    min-height: 48px;
    gap: 8px;
}
.spt-ctrl-left, .spt-ctrl-center, .spt-ctrl-right {
    display: flex; align-items: center; gap: 6px;
}
.spt-ctrl-left  { flex: 1; justify-content: flex-start; }
.spt-ctrl-center{ flex: 1; justify-content: center; }
.spt-ctrl-right { flex: 1; justify-content: flex-end; }

/* ══ TOAST ANIMATION ══ */
@keyframes sptToastIn {
    from { opacity:0; transform:translateX(-50%) translateY(-16px); }
    to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* Fix 5: shorthand mode type box is shorter so submit button is on-screen */
.spt-shorthand-mode .spt-box-wrap:last-of-type .spt-type-box {
    /* Inherits height from .spt-shorthand-mode .spt-type-box */
}

/* ── SHORTHAND: ref-stripe wrap auto, type box wrap fills all ── */
.spt-shorthand-mode .spt-box-wrap:first-child {
    flex: none !important;          /* ref stripe only takes its natural height */
}
.spt-shorthand-mode .spt-box-wrap:last-of-type {
    flex: none !important;  /* height is fixed on the type-box itself */
    overflow: visible !important;
}
.spt-shorthand-mode .spt-box-wrap:first-child .spt-ref-box-hidden {
    display: none !important;
}

/* Timer always visible in ref-stripe when running */
.spt-running .spt-timer,
.spt-running .spt-timer-label {
    display: block !important;
}

/* ══ SHORTHAND MODE: collapse ctrl-bar immediately, type box fills height ══ */
.spt-shorthand-outer .spt-ctrl-bar {
    height: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
/* Shorthand: first box-wrap (ref stripe only) = auto height */
.spt-shorthand-outer .spt-main-grid .spt-box-wrap:first-child {
    flex: 0 0 auto !important;
}
/* Shorthand: second box-wrap (type box) = fill all remaining space */
.spt-shorthand-outer .spt-main-grid .spt-box-wrap:last-of-type {
    flex: 1 !important;
}

/* Shorthand: type box narrower (80% width) for better UX */
.spt-shorthand-outer .spt-type-box {
    width: 80% !important;
    max-width: 1100px !important;
    margin: 8px auto 0 !important;
    border: 1.5px solid #3b5bdb !important;
    border-radius: 8px !important;
    /* 30% reduction applies via .spt-shorthand-mode .spt-type-box above */
}

/* Reference box: white with light border, distinct from type box */
.spt-ref-box {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .spt-shorthand-mode .spt-type-box {
        height: calc(100vh - 240px) !important;
        max-height: 340px !important;
    }
}

/* ── SHORTHAND: type box fills available space, submit stripe always at bottom ─ */
/* spt-outer is position:fixed flex-column. Children:
   ctrl-bar(collapsed) | prog-bar | main-grid(flex:1) | submit-stripe(flex-shrink:0)
   This layout naturally keeps submit at bottom and type box fills the rest. */
.spt-shorthand-outer .spt-main-grid {
    flex: 1 !important;
    overflow: hidden !important;
}
.spt-shorthand-outer .spt-main-grid .spt-box-wrap:last-of-type {
    flex: 1 !important;
    min-height: 0 !important;
}
.spt-shorthand-outer .spt-main-grid .spt-type-box {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 !important;
}
/* Desktop: type box height based on viewport */
@media (min-width: 1025px) {
    .spt-shorthand-outer .spt-type-box,
    .spt-shorthand-mode .spt-type-box {
        height: auto !important;
    }
}