/* ═══════════════════════════════════════════════════
   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-master-advanced/assets/fonts/KRDEV010.TTF') format('truetype');
    font-weight:normal; font-style:normal; font-display:swap;
}
.font-krutidev,
.font-krutidev span,
.font-krutidev .spt-mkerr-word,
.font-krutidev .cmp-correct-text,
.font-krutidev .cmp-wrong-text,
.font-krutidev .cmp-correction-text,
.font-krutidev .cmp-extra-text,
.font-krutidev .cmp-skipped-text { 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;
    width:99%; max-width:1400px; margin:0 auto;
}

/* ── CONTROL BAR ── */
.spt-ctrl-bar{
    background:#fff; border:1.5px solid var(--spt-border);
    border-radius:8px 8px 0 0; padding:8px 12px;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:6px; position:sticky; top:0; z-index:100;
}
.spt-ctrl-left,.spt-ctrl-right{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* ── 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:#7c3aed; color:#fff; }
.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:14px; background:#e2e8f0; border-radius:0; overflow:hidden; border:1px solid #cbd5e1; position:relative; }
.spt-prog-fill{ height:100%; width:0%; background:#10b981; 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:1.5px solid var(--spt-border); border-top:none; background:#fff;
}
.spt-box-wrap{ display:flex; flex-direction:column; }
.spt-box-wrap + .spt-box-wrap{ border-top:2px solid var(--spt-border); }
.spt-box-lbl{
    font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
    color:#64748b; padding:6px 14px; background:var(--spt-bg);
    border-bottom:1px solid var(--spt-border); font-family:'Segoe UI',sans-serif !important;
}

/* ── TEXT & TYPE BOXES — 65% PC width ── */
.spt-ref-box,
.spt-type-box{
    width:65% !important; max-width:1100px !important;
    height:220px !important;
    margin:5px auto !important;
    padding:15px !important;
    box-sizing:border-box;
    background:#ffffff !important;
    border:2px solid var(--spt-primary) !important;
    border-radius:12px !important;
    font-size:1.15rem !important;
    line-height:1.8 !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;
    scroll-behavior:smooth;
}
.spt-type-box{
    border-color:var(--spt-accent) !important;
    resize:none; outline:none;
    background:#fffef5 !important;
}
.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:460px !important;
}
.spt-shorthand-mode .spt-type-box:disabled {
    height:460px !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:center; gap:14px; margin-top:20px; padding-top:16px; border-top:1.5px solid var(--spt-border); flex-wrap:wrap; }

/* ── EXAM MODE ── */
.spt-exam-active .spt-ctrl-right{ display:none !important; }

/* ── 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:340px !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; } }