/* General Reset */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.app-container {
    max-width: 800px;
    width: 100%;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
}

h1 { margin-bottom: 10px; color: #111; }
.badge { background: #ff4757; color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.5em; vertical-align: middle; }
p { color: #666; margin-top: 0; }

/* --- FIXED QUIZ STYLES --- */
.quiz-section {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #eee;
    margin: 20px auto; 
    max-width: 500px; 
    text-align: left; 
}

/* New Class to force stacking */
.form-group {
    margin-bottom: 20px;
}

label { 
    font-weight: bold; 
    display: block; 
    margin-bottom: 8px; 
    font-size: 15px; 
    color: #333;
}

select {
    padding: 12px;
    width: 100%;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    background: #fff;
    box-sizing: border-box; 
}
select:focus { border-color: #4834d4; outline: none; }

.analyze-btn {
    width: 100%;
    padding: 15px;
    background-color: #ff4757;
    color: white;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.1s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.analyze-btn:hover { background-color: #ff4757; }
.analyze-btn:active { transform: scale(0.98); }

/* --- DASHBOARD --- */
#dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
    text-align: left;
}
.card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    flex: 1;
    min-width: 280px;
    border: 1px solid #eee;
}

/* Heat Map */
.image-container {
    background: white;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    height: 350px; 
    display: flex;
    align-items: center;
    justify-content: center;
}
#body-image { max-height: 100%; max-width: 100%; object-fit: contain; }
.highlight { color: #ff4757; font-weight: bold; }

/* --- RISK RESULT BAR (BOTTOM) --- */
.risk-bar {
    margin-top: 30px;
    background: #fff0f0;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ffdcdc;
}
.risk-bar p { font-weight: bold; margin-bottom: 10px; color: #333; }
.progress-bg {
    background: #ddd;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.progress-fill { height: 100%; background: #ff4757; width: 0%; transition: width 1s ease-out; }
#risk-percent-text { margin: 0; font-size: 24px; color: #ff4757; }


/* Buttons & Header */
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.voice-btn { background-color: #007bff; color: white; border: none; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: bold; }

.start-btn {
    background-color: #ff4757;
    color: white;
    border: none;
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(255, 71, 87, 0.3);
}

/* --- OVERLAY (TIMER PAGE) --- */
.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #1e1e1e; z-index: 1000;
    display: flex; justify-content: center; align-items: center; 
    color: white; /* Basic inheritance */
}

/* THIS IS THE PART THAT FIXES THE TEXT COLOR */
.overlay h1, 
.overlay h2, 
.overlay p, 
.overlay span {
    color: #ffffff !important; /* Force text to be white inside overlay */
}

.overlay-content { text-align: center; max-width: 500px; width: 90%; }

.timer-circle {
    width: 150px; height: 150px; border: 8px solid #ff4757;
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    margin: 30px auto; font-size: 60px; font-weight: bold; background: #2d2d2d;
    color: white !important; /* Force timer number to be white */
}

.overlay-controls { display: flex; gap: 20px; justify-content: center; }

.primary-btn { padding: 10px 30px; background: #ff4757; color: white; border: none; border-radius: 30px; font-size: 18px; cursor: pointer; }

/* Make the Quit/Pause buttons white outlines on dark background */
.secondary-btn { 
    padding: 10px 20px; 
    background: transparent; 
    color: #ffffff; 
    border: 1px solid #ffffff; 
    border-radius: 30px; 
    font-size: 16px; 
    cursor: pointer; 
}

.error-msg {
    background-color: #ffe6e6; /* Light Red Background */
    color: #d63031;             /* Dark Red Text */
    padding: 10px;
    border-radius: 8px;
    margin-top: 15px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #fab1a0;
}

ul { padding-left: 20px; }
li { margin-bottom: 12px; line-height: 1.5; }
.hidden { display: none !important; }
.fade-in { animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
footer { margin-top: 30px; font-size: 12px; color: #999; }