/* Cert Cram Daily Drill Styles */
:root {
    --dc-bg: #0a0c0b;
    --dc-card: #14181a;
    --dc-border: #2a2f2c;
    --dc-jade: #3fb98c;
    --dc-gold: #c8a24b;
    --dc-text: #e8e3d6;
    --dc-muted: #8b8a82;
    --dc-red: #e85d5d;
    --dc-green: #3fb98c;
}

.drill-hero {
    text-align: center;
    padding: 2.5rem 1.5rem 1.5rem;
}
.drill-hero h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--dc-jade);
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.drill-hero h1 b { color: var(--dc-gold); }
.drill-hero p { color: var(--dc-muted); margin-bottom: 1rem; }

.drill-streak-pill {
    display: inline-block;
    margin: 0.5rem auto 0;
    padding: 8px 18px;
    border: 1px solid var(--dc-border);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--dc-text);
    background: var(--dc-card);
}
.drill-streak-pill b { color: #ff8a3d; text-shadow: 0 0 10px rgba(255,138,61,0.6); }

.drill-cert-badge {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--dc-gold);
    border: 1px solid rgba(200,162,75,0.35);
    background: rgba(200,162,75,0.08);
    border-radius: 3px;
    padding: 3px 10px;
}

main {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

/* Question card */
.drill-card {
    background: var(--dc-card);
    border: 1px solid var(--dc-border);
    border-radius: 6px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

.drill-q-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--dc-muted);
}

.drill-q-num { color: var(--dc-jade); }
.drill-q-domain { color: var(--dc-gold); }

.drill-question {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--dc-text);
    margin-bottom: 1.25rem;
}

.drill-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.drill-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--dc-bg);
    border: 1px solid var(--dc-border);
    border-radius: 4px;
    color: var(--dc-text);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
}
.drill-option:hover {
    border-color: var(--dc-jade);
    background: rgba(63,185,140,0.06);
}
.drill-option.selected {
    border-color: var(--dc-jade);
    background: rgba(63,185,140,0.12);
}
.drill-option.correct {
    border-color: var(--dc-green);
    background: rgba(63,185,140,0.15);
}
.drill-option.incorrect {
    border-color: var(--dc-red);
    background: rgba(232,93,93,0.15);
}

.drill-option-letter {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--dc-jade);
    min-width: 1.5rem;
}

.drill-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

/* Buttons */
.drill-btn {
    border: none;
    border-radius: 4px;
    padding: 0.7rem 1.25rem;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s;
}
.drill-btn:active { transform: scale(0.98); }
.drill-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.drill-btn-primary {
    background: linear-gradient(180deg, var(--dc-jade), #2a8c66);
    color: #04140d;
}
.drill-btn-primary:hover { filter: brightness(1.1); }

.drill-btn-secondary {
    background: transparent;
    color: var(--dc-jade);
    border: 1px solid var(--dc-jade);
}
.drill-btn-secondary:hover { background: rgba(63,185,140,0.1); }

.drill-btn-gold {
    background: linear-gradient(180deg, var(--dc-gold), #a07f2e);
    color: #0a0c0b;
    text-decoration: none;
    display: inline-block;
}
.drill-btn-gold:hover { filter: brightness(1.1); }

/* Explanation panel */
.drill-explanation {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dc-border);
    animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.drill-exp-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.drill-exp-status {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
}
.drill-exp-status.correct { background: rgba(63,185,140,0.2); color: var(--dc-green); }
.drill-exp-status.incorrect { background: rgba(232,93,93,0.2); color: var(--dc-red); }
.drill-exp-cert {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--dc-gold);
    border: 1px solid rgba(200,162,75,0.3);
    background: rgba(200,162,75,0.08);
    border-radius: 3px;
    padding: 2px 8px;
}

.drill-exp-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--dc-text);
    margin-bottom: 0.5rem;
}
.drill-exp-why {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--dc-muted);
    border-top: 1px solid var(--dc-border);
    padding-top: 0.75rem;
}
.drill-exp-why b { color: var(--dc-jade); }

/* Upsell section */
.drill-upsell {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(63,185,140,0.04), rgba(200,162,75,0.04));
    border: 1px dashed var(--dc-border);
    border-radius: 6px;
    text-align: center;
}
.drill-upsell-badge {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--dc-gold);
    background: rgba(200,162,75,0.1);
    border: 1px solid rgba(200,162,75,0.3);
    border-radius: 3px;
    padding: 3px 10px;
    margin-bottom: 0.75rem;
}
.drill-upsell h3 {
    font-family: 'Cinzel', serif;
    color: var(--dc-gold);
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
.drill-pro-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    text-align: left;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.drill-pro-list li {
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--dc-text);
    border-bottom: 1px solid rgba(200,162,75,0.1);
}
.drill-pro-list li:last-child { border-bottom: none; }
.drill-upsell-note {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--dc-muted);
}

/* Stats section */
.drill-stats {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.stat-box {
    background: var(--dc-card);
    border: 1px solid var(--dc-border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    min-width: 120px;
    text-align: center;
}
.stat-value {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--dc-jade);
    line-height: 1;
}
.stat-label {
    font-size: 0.7rem;
    color: var(--dc-muted);
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .drill-card { padding: 1.25rem; }
    .drill-actions { flex-direction: column; }
    .drill-btn { width: 100%; }
    .drill-stats { flex-direction: column; align-items: center; }
}