/* ============================================================
   LAT MCQ PRACTICE TOOL — FULLY RESPONSIVE STYLESHEET
   Mobile-first: 320px → 480px → 768px → 1024px → 1280px+
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ===========================
   CSS VARIABLES
   =========================== */
:root {
    --primary:          #1a56db;
    --primary-dark:     #1447b8;
    --primary-light:    #ebf2ff;
    --primary-mid:      #c7d9ff;
    --success:          #0f9b6c;
    --success-light:    #e6f7f1;
    --danger:           #e53e3e;
    --danger-light:     #fff0f0;
    --warning:          #d97706;
    --warning-light:    #fffbeb;
    --neutral:          #64748b;
    --neutral-light:    #f1f5f9;
    --white:            #ffffff;
    --bg:               #f0f4ff;
    --text:             #1e293b;
    --text-muted:       #64748b;
    --border:           #e2e8f0;

    --shadow-sm:  0 1px 4px rgba(26,86,219,.08), 0 2px 8px rgba(0,0,0,.04);
    --shadow-md:  0 4px 16px rgba(26,86,219,.12), 0 2px 8px rgba(0,0,0,.06);
    --shadow-lg:  0 8px 32px rgba(26,86,219,.16), 0 4px 16px rgba(0,0,0,.08);

    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  20px;
    --radius-xl:  28px;

    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Fluid spacing */
    --space-xs:  clamp(8px,  2vw,  12px);
    --space-sm:  clamp(12px, 3vw,  18px);
    --space-md:  clamp(18px, 4vw,  28px);
    --space-lg:  clamp(28px, 5vw,  44px);
    --space-xl:  clamp(36px, 6vw,  60px);

    /* Fluid type */
    --text-xs:   clamp(11px, 2.5vw, 12px);
    --text-sm:   clamp(12px, 3vw,   14px);
    --text-base: clamp(14px, 3.5vw, 16px);
    --text-md:   clamp(15px, 4vw,   18px);
    --text-lg:   clamp(18px, 4.5vw, 22px);
    --text-xl:   clamp(22px, 5vw,   32px);
    --text-2xl:  clamp(26px, 6vw,   44px);
}

/* ===========================
   RESET & BASE
   =========================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
button, select { font-family: inherit; }

/* ===========================
   CONTAINER — fluid
   =========================== */
.container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 clamp(12px, 4vw, 24px);
}

/* ===========================
   HERO SECTION
   =========================== */
.hero-section {
    background: linear-gradient(145deg, #1a56db 0%, #1447b8 55%, #0f3a9e 100%);
    padding: var(--space-xl) 0 clamp(40px, 7vw, 64px);
    position: relative;
    overflow: hidden;
}
.hero-section::before,
.hero-section::after {
    content: ''; position: absolute;
    border-radius: 50%; pointer-events: none;
}
.hero-section::before {
    width: clamp(160px,30vw,300px); height: clamp(160px,30vw,300px);
    background: rgba(255,255,255,.06); top: -30%; right: -8%;
}
.hero-section::after {
    width: clamp(120px,22vw,220px); height: clamp(120px,22vw,220px);
    background: rgba(255,255,255,.04); bottom: -40%; left: -5%;
}

.hero-content {
    text-align: center; position: relative; z-index: 1;
    animation: fadeInDown 0.6s ease-out;
}

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.18); color: var(--white);
    padding: clamp(5px,1.5vw,7px) clamp(14px,3vw,20px);
    border-radius: 30px; font-size: var(--text-xs);
    font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    margin-bottom: var(--space-sm);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(8px);
}

.breadcrumb {
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: clamp(6px,2vw,10px);
    margin-bottom: var(--space-sm); font-size: var(--text-sm);
}
.breadcrumb a          { color: rgba(255,255,255,.75); text-decoration: none; transition: var(--transition); }
.breadcrumb a:hover    { color: var(--white); }
.breadcrumb .separator { color: rgba(255,255,255,.35); }
.breadcrumb .current   { color: rgba(255,255,255,.9); font-weight: 600; }

.hero-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800; color: var(--white);
    margin-bottom: clamp(10px,2vw,16px);
    letter-spacing: -0.5px; line-height: 1.15;
}

.hero-subtitle {
    font-size: var(--text-md);
    color: rgba(255,255,255,.82);
    max-width: min(580px, 90%);
    margin: 0 auto; line-height: 1.7;
}

/* ===========================
   TOOL SECTION
   =========================== */
.tool-section { padding: var(--space-lg) 0 var(--space-xl); }

/* ===========================
   FILTER CARD
   =========================== */
.filter-section { animation: fadeInUp 0.5s ease-out; }

.filter-card {
    background: var(--white); border-radius: var(--radius-xl);
    padding: var(--space-lg) var(--space-md);
    box-shadow: var(--shadow-lg); margin-bottom: var(--space-md);
    border: 1px solid rgba(26,86,219,.08);
}

.filter-card h2 {
    font-family: var(--font-display);
    font-size: var(--text-lg); font-weight: 700; color: var(--text);
    margin-bottom: var(--space-md);
    display: flex; align-items: center; gap: 10px;
}
.filter-card h2::before { content: '⚙️'; }

.filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm); align-items: flex-end;
}

.filter-group { display: flex; flex-direction: column; gap: 8px; }

.filter-group label {
    font-size: var(--text-xs); font-weight: 700;
    color: var(--neutral); text-transform: uppercase; letter-spacing: 0.8px;
}

.filter-select {
    width: 100%;
    padding: clamp(10px,2.5vw,14px) clamp(36px,6vw,44px) clamp(10px,2.5vw,14px) clamp(12px,3vw,16px);
    border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-base);
    font-weight: 500; color: var(--text); background: var(--white);
    cursor: pointer; transition: var(--transition);
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%231a56db' d='M7 10L2 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.filter-select:hover { border-color: var(--primary); }
.filter-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* ===========================
   BUTTONS
   =========================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: clamp(11px,2.5vw,14px) clamp(18px,4vw,26px);
    border: none; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-base);
    font-weight: 600; cursor: pointer; transition: var(--transition);
    text-decoration: none; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; user-select: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white); box-shadow: 0 4px 14px rgba(26,86,219,.35);
}
.btn-primary:hover    { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,86,219,.45); }
.btn-primary:active   { transform: translateY(0) scale(0.98); }
.btn-primary:disabled { background: var(--neutral); box-shadow: none; cursor: not-allowed; opacity: 0.65; transform: none; }

.btn-secondary {
    background: var(--white); color: var(--primary);
    border: 2px solid var(--primary-mid);
}
.btn-secondary:hover  { background: var(--primary-light); border-color: var(--primary); }
.btn-secondary:active { transform: scale(0.98); }

.btn-lg {
    width: 100%;
    padding: clamp(13px,3vw,16px) clamp(20px,4vw,28px);
    font-size: var(--text-md); border-radius: var(--radius-md);
}

/* ===========================
   QUIZ HEADER
   =========================== */
.quiz-section { animation: fadeInUp 0.5s ease-out; }

.quiz-header {
    display: flex; align-items: center; gap: var(--space-sm);
    background: var(--white); padding: clamp(14px,3vw,20px);
    border-radius: var(--radius-lg); margin-bottom: var(--space-sm);
    box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}

.quiz-info { flex: 1; min-width: 0; }

.progress-text {
    display: block; font-size: var(--text-xs); font-weight: 700;
    color: var(--primary); margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.6px;
}

.progress-bar {
    width: 100%; height: 7px; background: var(--border);
    border-radius: 4px; overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    border-radius: 4px;
    transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
    width: 0%;
}

.quiz-timer {
    display: flex; align-items: center; gap: 8px;
    background: var(--primary-light);
    padding: clamp(8px,2vw,11px) clamp(12px,3vw,18px);
    border-radius: var(--radius-sm); flex-shrink: 0;
    border: 1.5px solid var(--primary-mid); transition: var(--transition);
}
.timer-icon { width: clamp(16px,3vw,20px); height: clamp(16px,3vw,20px); color: var(--primary); flex-shrink: 0; }
.timer-text {
    font-size: clamp(15px,3.5vw,18px); font-weight: 700; color: var(--primary);
    font-family: 'Courier New', Courier, monospace;
    min-width: 44px; letter-spacing: 1px;
}

.quiz-timer.warning { background: var(--warning-light); border-color: #fcd34d; }
.quiz-timer.warning .timer-text,
.quiz-timer.warning .timer-icon { color: var(--warning); }
.quiz-timer.danger  { background: var(--danger-light); border-color: #fca5a5; animation: pulse-border 1s infinite; }
.quiz-timer.danger .timer-text { color: var(--danger); animation: pulse 1s infinite; }
.quiz-timer.danger .timer-icon { color: var(--danger); }

/* ===========================
   QUESTION CARD
   =========================== */
.question-card {
    background: var(--white); border-radius: var(--radius-xl);
    padding: var(--space-lg) var(--space-md);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(26,86,219,.07);
    animation: slideUp 0.35s ease-out;
}

.question-meta { display: flex; gap: 8px; margin-bottom: var(--space-sm); flex-wrap: wrap; }

.q-subject, .q-level {
    padding: 4px clamp(10px,2vw,14px); border-radius: 20px;
    font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.q-subject { background: var(--primary-light); color: var(--primary); }
.q-level   { background: var(--neutral-light); color: var(--neutral); }

.question-text {
    font-family: var(--font-display);
    font-size: var(--text-md); font-weight: 600; color: var(--text);
    margin-bottom: var(--space-md); line-height: 1.55;
}

/* ===========================
   OPTIONS
   =========================== */
.options-grid {
    display: grid; grid-template-columns: 1fr;
    gap: clamp(8px,2vw,12px);
}

.option-btn {
    display: flex; align-items: center;
    gap: clamp(10px,3vw,16px);
    padding: clamp(13px,3vw,18px) clamp(14px,3.5vw,20px);
    background: var(--neutral-light); border: 2px solid var(--border);
    border-radius: var(--radius-md); cursor: pointer;
    transition: var(--transition); text-align: left; width: 100%;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; position: relative; overflow: hidden;
}
.option-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--primary-light), transparent 70%);
    opacity: 0; transition: var(--transition); pointer-events: none;
}
.option-btn:hover          { border-color: var(--primary); background: var(--white); transform: translateX(4px); }
.option-btn:hover::after   { opacity: 1; }
.option-btn:active         { transform: translateX(2px) scale(0.99); }
.option-btn:disabled       { cursor: not-allowed; }

.option-label {
    display: flex; align-items: center; justify-content: center;
    width:     clamp(32px,7vw,40px);
    height:    clamp(32px,7vw,40px);
    min-width: clamp(32px,7vw,40px);
    background: var(--primary-light); color: var(--primary);
    border-radius: 50%; font-weight: 800;
    font-size: clamp(12px,3vw,15px);
    font-family: var(--font-display);
    transition: var(--transition); position: relative; z-index: 1; flex-shrink: 0;
}
.option-btn:hover .option-label { background: var(--primary); color: var(--white); }

.option-text {
    flex: 1; font-size: var(--text-base); font-weight: 500;
    line-height: 1.5; position: relative; z-index: 1; word-break: break-word;
}

/* Option States */
.option-btn.selected               { background: var(--primary-light); border-color: var(--primary); }
.option-btn.selected .option-label { background: var(--primary); color: var(--white); }
.option-btn.correct                { background: var(--success-light); border-color: var(--success); }
.option-btn.correct .option-label  { background: var(--success); color: var(--white); }
.option-btn.incorrect              { background: var(--danger-light); border-color: var(--danger); }
.option-btn.incorrect .option-label{ background: var(--danger); color: var(--white); }
.option-btn.disabled               { opacity: 0.7; pointer-events: none; }

/* Question Actions */
.question-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-sm); margin-top: var(--space-md);
    padding-top: var(--space-md); border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.question-counter-pill {
    font-size: var(--text-sm); font-weight: 700;
    color: var(--neutral); background: var(--neutral-light);
    padding: 6px 14px; border-radius: 20px; white-space: nowrap;
}

/* ===========================
   RESULTS
   =========================== */
.results-section { animation: fadeInUp 0.5s ease-out; }

.results-hero {
    background: linear-gradient(145deg, #1a56db 0%, #1447b8 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-lg) var(--space-md);
    text-align: center; color: var(--white);
    margin-bottom: var(--space-md); box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
}
.results-hero::before {
    content: ''; position: absolute; top: -20%; right: -10%;
    width: clamp(100px,25vw,200px); height: clamp(100px,25vw,200px);
    background: rgba(255,255,255,.07); border-radius: 50%; pointer-events: none;
}

.results-icon { font-size: clamp(32px,7vw,44px); margin-bottom: 8px; }
.results-hero h2 {
    font-family: var(--font-display); font-size: var(--text-xl);
    font-weight: 800; margin-bottom: var(--space-md); position: relative; z-index: 1;
}

/* Score Ring */
.score-ring-container {
    position: relative;
    width:  clamp(110px,28vw,150px);
    height: clamp(110px,28vw,150px);
    margin: 0 auto var(--space-sm);
}
.score-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg    { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 10; }
.ring-fill  {
    fill: none; stroke: var(--white); stroke-width: 10; stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1);
}

.score-ring-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
}
.score-percentage  { font-family: var(--font-display); font-size: clamp(24px,6vw,34px); font-weight: 800; color: var(--white); line-height: 1; }
.score-label-ring  { font-size: var(--text-xs); font-weight: 600; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: 1px; }
.score-status      { font-size: var(--text-base); color: rgba(255,255,255,.88); font-weight: 500; position: relative; z-index: 1; padding: 0 var(--space-xs); }

/* Score Grid */
.results-card {
    background: var(--white); border-radius: var(--radius-xl);
    padding: var(--space-md); box-shadow: var(--shadow-md);
    margin-bottom: var(--space-md); border: 1px solid var(--border);
}

.score-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px,2vw,14px);
}

.score-item {
    text-align: center;
    padding: clamp(12px,3vw,20px) clamp(6px,2vw,10px);
    border-radius: var(--radius-md); border: 1.5px solid var(--border);
    background: var(--neutral-light); transition: var(--transition);
}
.score-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.score-icon  { font-size: clamp(18px,4vw,24px); margin-bottom: 6px; }
.score-label { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--neutral); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.score-value { display: block; font-family: var(--font-display); font-size: clamp(22px,5vw,30px); font-weight: 800; color: var(--primary); }
.score-value.correct-color   { color: var(--success); }
.score-value.incorrect-color { color: var(--danger); }

/* ===========================
   REVIEW SECTION
   =========================== */
.review-section              { margin-bottom: var(--space-md); }
.review-section h3 {
    font-family: var(--font-display); font-size: var(--text-lg);
    font-weight: 700; color: var(--text); margin-bottom: var(--space-sm);
}

.review-container { display: flex; flex-direction: column; gap: clamp(10px,2vw,16px); }

.review-item {
    background: var(--white); border-radius: var(--radius-lg);
    padding: var(--space-md); box-shadow: var(--shadow-sm);
    border: 1px solid var(--border); border-left: 5px solid var(--border);
}
.review-item.correct   { border-left-color: var(--success); background: var(--success-light); }
.review-item.incorrect { border-left-color: var(--danger);  background: var(--danger-light); }
.review-item.skipped   { border-left-color: var(--neutral); }

.review-item h4 { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: var(--text); margin-bottom: 8px; }
.review-item p  { font-size: var(--text-sm); font-weight: 500; color: var(--text); margin-bottom: var(--space-sm); line-height: 1.5; }

.review-options { display: flex; flex-direction: column; gap: 8px; }

.review-option {
    padding: clamp(8px,2vw,12px) clamp(10px,2.5vw,14px);
    border-radius: var(--radius-sm); border: 1.5px solid var(--border);
    background: var(--white); display: flex; align-items: center;
    gap: 10px; font-size: var(--text-sm); font-weight: 500; word-break: break-word;
}
.review-option.correct-answer { background: var(--success-light); border-color: var(--success); }
.review-option.user-wrong     { background: var(--danger-light);  border-color: var(--danger);  }

.option-status {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; min-width: 22px; border-radius: 50%;
    font-size: 11px; font-weight: 800;
    background: var(--neutral-light); color: var(--neutral); flex-shrink: 0;
}
.option-status.correct-icon   { background: var(--success); color: var(--white); }
.option-status.incorrect-icon { background: var(--danger);  color: var(--white); }

/* ===========================
   RESULTS ACTIONS
   =========================== */
.results-actions { margin-bottom: var(--space-sm); }

/* ===========================
   ANIMATIONS
   =========================== */
@keyframes fadeInDown  { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInUp    { from { opacity:0; transform:translateY(18px);  } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp     { from { opacity:0; transform:translateY(10px);  } to { opacity:1; transform:translateY(0); } }
@keyframes pulse       { 0%,100%{ opacity:1; } 50%{ opacity:0.6; } }
@keyframes pulse-border{ 0%,100%{ box-shadow:0 0 0 0   rgba(229,62,62,.3); } 50%{ box-shadow:0 0 0 6px rgba(229,62,62,0); } }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- TABLET PORTRAIT (max 768px) --- */
@media (max-width: 768px) {
    .tool-section { padding: clamp(20px,5vw,32px) 0 clamp(36px,8vw,52px); }

    .filter-card  { padding: var(--space-md); border-radius: var(--radius-lg); }
    .filter-grid  { grid-template-columns: 1fr; }

    .quiz-header  { flex-direction: column; align-items: stretch; }
    .quiz-timer   { justify-content: center; width: 100%; }

    .question-card { padding: var(--space-md); border-radius: var(--radius-lg); }

    .score-grid   { grid-template-columns: repeat(2,1fr); }
    .results-hero { padding: var(--space-md); border-radius: var(--radius-lg); }
    .results-card { padding: var(--space-md); border-radius: var(--radius-lg); }
}

/* --- MOBILE (max 480px) --- */
@media (max-width: 480px) {
    .container     { padding: 0 clamp(10px,3.5vw,14px); }

    .filter-card   { padding: clamp(16px,4vw,20px); }

    .quiz-header   { padding: clamp(12px,3vw,16px); border-radius: var(--radius-md); }
    .question-card { padding: clamp(16px,4vw,20px); border-radius: var(--radius-md); }

    .question-actions {
        flex-direction: column-reverse; align-items: stretch; gap: 10px;
    }
    .question-counter-pill { align-self: center; }
    .btn-secondary         { width: 100%; }

    .results-hero  { padding: clamp(20px,5vw,28px) clamp(14px,4vw,20px); }
    .results-card  { padding: clamp(14px,4vw,20px); }
    .score-grid    { grid-template-columns: repeat(2,1fr); gap: 10px; }

    .review-item   { padding: clamp(14px,3.5vw,18px); border-radius: var(--radius-md); }
}

/* --- MOBILE SMALL (max 360px) --- */
@media (max-width: 360px) {
    .badge              { font-size: 9px; padding: 4px 12px; }
    .filter-card h2     { font-size: 15px; }
    .option-btn         { gap: 8px; }
    .score-grid         { gap: 8px; }
    .score-value        { font-size: 20px; }
    .review-option      { font-size: 12px; gap: 8px; }
}

/* --- DESKTOP WIDE (1280px+) --- */
@media (min-width: 1280px) {
    .container    { max-width: 960px; }
    .filter-grid  { grid-template-columns: 1fr 1fr 1fr; }
    .options-grid { grid-template-columns: 1fr 1fr; }
}

/* --- TOUCH DEVICES: disable hover transforms --- */
@media (hover: none) {
    .option-btn:hover { transform: none; background: var(--neutral-light); border-color: var(--border); }
    .option-btn:hover::after { opacity: 0; }
    .btn-primary:hover { transform: none; }
    .score-item:hover  { transform: none; }
}