/* ═══════════════════════════════════════════════════════════════
   SPEEDY MASTER — CONFIG MODAL (Image 1 Style Redesign)
═══════════════════════════════════════════════════════════════ */

/* OVERLAY */
.spcm-overlay {
    /* Full-page — covers everything including spt-outer (z-index:99999) */
    position: fixed; inset: 0; z-index: 9999999;
    background: #eef2ff;
    display: flex; flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* MODAL — full page, no max-width cap */
.spcm-modal {
    background: #eef2ff;
    width: 100%; max-width: 100%;
    min-height: 100vh;
    display: flex; flex-direction: column;
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* TITLE CARD */
.spcm-title-card {
    background: linear-gradient(135deg, #1e3a8a, #312e81);
    border-radius: 16px 16px 0 0;
    padding: 0;
}
/* title-card sub-elements removed */

/* TABS */
.spcm-tabs {
    display: flex; gap: 0; border-bottom: 2px solid #dbe4ff;
    background: #e8eeff; padding: 0 16px;
}
.spcm-tab {
    padding: 10px 18px; border: none; background: transparent;
    font-size: .85rem; font-weight: 700; color: #4f6396; cursor: pointer;
    border-radius: 10px 10px 0 0; border-bottom: 3px solid transparent;
    margin-bottom: -2px; transition: all .15s;
}
.spcm-tab.active { color: #1e3a8a; border-bottom-color: #1e3a8a; background: #fff; }
.spcm-tab:hover:not(.active) { background: rgba(255,255,255,.5); }

/* PANEL */
.spcm-panel  { padding: 14px 24px 4px; flex: 1; max-width: 960px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.spcm-hidden { display: none !important; }

/* FONT BANNER */
.spcm-font-banner {
    background: #fff; border: 2px solid #3b5bdb; border-radius: 10px;
    padding: 12px 14px; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.spcm-font-banner-label {
    font-size: .82rem; font-weight: 800; color: #1e3a8a;
    display: flex; align-items: center; gap: 6px;
}
.spcm-font-required-star { color: #e63946; font-size: 1rem; }
.spcm-font-required-note { font-weight: 400; color: #64748b; font-size: .72rem; }
.spcm-font-select-main {
    padding: 8px 12px; border: 1.5px solid #93c5fd; border-radius: 8px;
    font-size: .88rem; font-weight: 700; color: #1e3a8a; background: #eff6ff;
    min-width: 200px; cursor: pointer;
}

/* CUSTOMISATION HEADER */
.spcm-cust-header {
    background: #fff; border: 1.5px solid #dbe4ff; border-radius: 10px;
    padding: 10px 14px; display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 2px;
}
.spcm-cust-header-left {
    font-size: .88rem; font-weight: 700; color: #1e3a8a;
    display: flex; align-items: center; gap: 8px;
}
.spcm-toggle-label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.spcm-toggle-label input[type=checkbox] { width: 16px; height: 16px; accent-color: #1e3a8a; cursor: pointer; }
.spcm-toggle-chip {
    font-size: .8rem; font-weight: 800; color: #1e3a8a;
    background: #dbeafe; padding: 3px 10px; border-radius: 20px;
}

/* INPUT ROW (Image 1 compact input row) */
.spcm-input-row {
    background: #fff; border: 1.5px solid #dbe4ff; border-radius: 10px;
    padding: 14px; display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.spcm-input-cell { display: flex; flex-direction: column; gap: 5px; min-width: 90px; flex: 1; }
.spcm-input-lbl  { font-size: .62rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .5px; }
.spcm-inline-input {
    padding: 8px 8px; border: 1.5px solid #bfdbfe; border-radius: 7px;
    font-size: .92rem; font-weight: 700; color: #1e3a8a; background: #f8faff;
    width: 100%; box-sizing: border-box; text-align: center;
}
.spcm-inline-input:focus { outline: none; border-color: #3b5bdb; box-shadow: 0 0 0 2px #dbeafe; }
.spcm-reset-btn {
    background: none; border: 1.5px solid #e63946; color: #e63946;
    border-radius: 7px; padding: 5px 14px; font-size: .78rem; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.spcm-reset-btn:hover { background: #fee2e2; }

/* STATS CARDS GRID (Image 1 card layout) */
.spcm-stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin: 10px 0;
}
.spcm-stat-card {
    background: #fff; border: 1.5px solid #dbe4ff; border-radius: 10px;
    padding: 14px 16px; text-align: center;
    box-shadow: 0 2px 8px rgba(30,58,138,.04);
}
.spcm-stat-label { font-size: .72rem; color: #64748b; font-weight: 700; background: #f0f4ff; padding: 3px 8px; border-radius: 6px; margin-bottom: 8px; display: inline-block; }
.spcm-stat-value { font-size: 1.05rem; font-weight: 900; color: #1e3a8a; }
.spcm-stat-value.spcm-green { color: #16a34a; }
.spcm-stat-value.spcm-red   { color: #dc2626; }

/* EXTRA SETTINGS ROW */
.spcm-extra-row {
    background: #fff; border: 1.5px solid #dbe4ff; border-radius: 10px;
    padding: 10px 14px; margin: 0 0 12px;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.spcm-chk { display: flex; align-items: center; gap: 5px; font-size: .8rem; cursor: pointer; color: #475569; font-weight: 600; }
.spcm-chk input { width: 14px; height: 14px; accent-color: #1e3a8a; }
.spcm-select { padding: 4px 7px; border: 1px solid #dbe4ff; border-radius: 6px; font-size: .78rem; }

/* EXAM SUMMARY */
.spcm-exam-summary { background: #eff6ff; border: 1.5px solid #93c5fd; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.spcm-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.spcm-summary-item { display: flex; align-items: baseline; gap: 6px; font-size: .79rem; padding: 3px 0; border-bottom: 1px dashed #bfdbfe; }
.spcm-summary-key  { color: #1d4ed8; font-weight: 700; min-width: 110px; }
.spcm-summary-val  { color: #0f172a; font-weight: 700; }
.spcm-no-cats { background: #fef9c3; border: 1.5px solid #fde047; border-radius: 8px; padding: 12px 14px; font-size: .84rem; color: #92400e; }

/* FOOTER */
.spcm-footer { padding: 12px 16px 16px; border-top: 2px solid #dbe4ff; background: #e8eeff;
    position: sticky; bottom: 0; z-index: 10; }
.spcm-footer-btns { display: flex; gap: 10px; margin-bottom: 10px; }
.spcm-back-btn {
    padding: 11px 22px; background: #e63946; color: #fff; border: none;
    border-radius: 10px; font-size: .9rem; font-weight: 800; cursor: pointer;
    flex: 1; transition: opacity .15s;
}
.spcm-back-btn:hover { opacity: .88; }
.spcm-save-btn {
    padding: 11px 22px; background: linear-gradient(135deg, #1e3a8a, #3b5bdb);
    color: #fff; border: none; border-radius: 10px; font-size: .9rem;
    font-weight: 900; cursor: pointer; flex: 2; transition: opacity .15s;
    letter-spacing: .3px;
}
.spcm-save-btn:hover { opacity: .9; }
.spcm-autostart-hint { margin-top: 8px; padding: 8px 12px; background: #eff6ff; border-left: 3px solid #3b82f6; border-radius: 0 7px 7px 0; font-size: .8rem; color: #1d4ed8; }

/* HINT VISIBILITY */
.spcm-hint-shorthand { display: none; }
.spcm-hint-typing    { display: none; }

/* ── RESPONSIVE ── */
@media(max-width: 600px) {
    .spcm-modal { max-height: 98vh; }
    .spcm-stats-grid { grid-template-columns: 1fr 1fr; }
    .spcm-input-row { gap: 8px; }
    .spcm-input-cell { min-width: 70px; }
}

/* ══════════════════════════════════════════════════════════════
   EXERCISE CATEGORY NAVIGATION (spex-*)
══════════════════════════════════════════════════════════════ */
.spex-cat-header {
    background: linear-gradient(135deg, #1e3a8a, #312e81);
    padding: 10px 16px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.spex-cat-sel {
    height: 34px; padding: 0 10px;
    border: 2px solid rgba(255,255,255,.3); border-radius: 8px;
    background: rgba(255,255,255,.12); color: #fff;
    font-size: .88rem; font-weight: 700; cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px;
}
.spex-cat-sel option { background: #1e1b4b; color: #fff; }
.spex-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.25); border-radius: 8px;
    color: #fff; font-size: 1.1rem; font-weight: 900; text-decoration: none;
    transition: background .15s;
}
.spex-nav-btn:hover { background: rgba(255,255,255,.3); color: #fff; }

/* Fix 1: hide exercise begin-card when config modal is open */
.spcm-overlay[style*="display: flex"] ~ * .spt-begin-wrap,
.spcm-overlay[style*="display:flex"] ~ * .spt-begin-wrap {
    display: none !important;
}
/* Also constrain title card content width */
.spcm-title-card-inner { max-width: 960px; margin: 0 auto; }
.spcm-tabs { max-width: 960px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.spcm-footer .spcm-footer-btns { max-width: 960px; margin: 0 auto; }


/* Simple header accent at top of full-page config */
.spcm-modal::before {
    content: '';
    display: block;
    height: 6px;
    background: linear-gradient(135deg, #0f1b4c, #312e81, #6d28d9);
}

/* ── FIX 7: Mobile — config modal fits screen width ── */
@media (max-width: 640px) {
    .spcm-overlay { padding: 0; }
    .spcm-modal   { border-radius: 0; min-height: 100vh; }
    .spcm-tabs    { padding: 0 8px; }
    .spcm-tab     { padding: 8px 10px; font-size: .78rem; }
    .spcm-panel   { padding: 10px 12px 4px; }
    .spcm-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .spcm-stat-card  { padding: 10px 12px; }
    .spcm-stat-value { font-size: .95rem; }
    .spcm-input-row  { flex-wrap: wrap; gap: 6px; padding: 10px; }
    .spcm-input-cell { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); }
    .spcm-font-banner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .spcm-font-select-main { width: 100%; min-width: unset; }
    .spcm-footer-btns { gap: 8px; }
    .spcm-back-btn, .spcm-save-btn { padding: 10px 14px; font-size: .84rem; }
    .spcm-extra-row { gap: 8px; font-size: .78rem; }
    .spcm-cust-header { padding: 8px 10px; }
}

/* ── Exam Rule Cards ─────────────────────────────────────────── */
.spcm-exam-cards {
    display: flex; flex-direction: column; gap: 10px;
    padding: 4px 0 16px;
}
.spcm-exam-card {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    background: #fff;
    transition: all .15s;
}
.spcm-exam-card:hover {
    border-color: #6d28d9;
    background: #f5f3ff;
}
.spcm-exam-card-selected {
    border-color: #6d28d9 !important;
    background: #f5f3ff !important;
    box-shadow: 0 0 0 3px rgba(109,40,217,.15);
}
.spcm-exam-card-selected .spcm-ec-name {
    color: #4c1d95;
}
.spcm-ec-name {
    font-size: .95rem; font-weight: 800;
    color: #1e293b; margin-bottom: 8px;
}
.spcm-ec-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.spcm-ec-chip {
    font-size: .72rem; font-weight: 700;
    background: #ede9fe; color: #5b21b6;
    padding: 2px 8px; border-radius: 20px;
}
@media (max-width: 600px) {
    .spcm-exam-card { padding: 10px 12px; }
    .spcm-ec-name   { font-size: .87rem; }
}