:root {
    --primary-color: #ff6b6b;
    --primary-hover: #fa5252;
    --secondary-color: #4dabf7;
    --bg-color: #f3a83d;
    /* Karnaf Orange */
    --card-bg: #ffffff;
    --text-color: #343a40;
    --text-muted: #868e96;
    --border-color: #e9ecef;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    --radius: 12px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Heebo', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 500px;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.logo img {
    max-width: 250px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    border-radius: 15px;
    /* Softer edges */
}

/* User Info & Forms */
.user-info {
    margin-bottom: 15px;
}

.user-info input {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    background: var(--card-bg);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.user-info input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.3);
}

.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color);
    text-align: right;
}

.select-wrapper {
    display: flex;
    gap: 12px;
}

select {
    flex: 1;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1.1rem;
    background: white;
    font-family: inherit;
    transition: border 0.3s;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: var(--secondary-color);
}

select:disabled {
    background-color: #f1f3f5;
    cursor: not-allowed;
    color: #adb5bd;
}

.icon-btn {
    background: #e9ecef;
    border: none;
    width: 55px;
    /* Large button */
    border-radius: var(--radius);
    color: var(--text-color);
    cursor: pointer;
    font-size: 1.4rem;
    /* Large icon */
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background: #dee2e6;
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Timer and Main Button */
.timer-panel {
    text-align: center;
    padding: 10px 0;
}

.timer-display {
    font-size: 4.5rem;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    margin-bottom: 30px;
    color: white;
    /* White timer on orange bg? no, this is not inside card anymore? wait based on HTML structure */
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Need to adapt colors if timer is on orange background now */
/* Looking at HTML structure in index.html, user removed .card from timer-panel? 
   Let's check index.html again. The .timer-panel IS inside a card in the original code, 
   but user might want it transparent?
   The user said "all background orange". 
   Let's keep the .card for controls so they are readable, but maybe make the timer stand out directly on orange?
   Or keep everything in white cards.
   User said "return choices ... BIG".
   I will stick to White Cards on Orange Background. It's clean.
*/

.timer-panel .timer-display {
    color: white;
    /* If outside card */
}

/* Wait, in Step 169 HTML, timer-panel was separate div.
   If I want the timer to blend with orange, I should remove .card from it in HTML or CSS.
   Let's make CSS handle it.
*/
.card.timer-panel {
    background: transparent;
    /* No white box for timer */
    box-shadow: none;
    padding-top: 0;
}

.main-btn {
    width: 200px;
    height: 200px;
    border: none;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
    margin: 0 auto;
    transition: all 0.15s ease;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
}

.main-btn i {
    font-size: 3.5rem;
}

/* 3D Effect - Start State (Blue) */
.main-btn.start {
    background: #4dabf7;
    box-shadow: 0 12px 0 #228be6, 0 20px 25px rgba(0, 0, 0, 0.2);
}

.main-btn.start:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 0 #228be6, 0 25px 30px rgba(0, 0, 0, 0.25);
    background: #5eb3f9;
}

.main-btn.start:active {
    transform: translateY(12px);
    box-shadow: 0 0 0 #228be6, 0 0 5px rgba(0, 0, 0, 0.2);
}

/* 3D Effect - Stop State (Red) */
.main-btn.stop {
    background: #ff6b6b;
    box-shadow: 0 12px 0 #e03131, 0 20px 25px rgba(0, 0, 0, 0.2);
}

.main-btn.stop:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 0 #e03131, 0 25px 30px rgba(0, 0, 0, 0.25);
    background: #ff7e7e;
}

.main-btn.stop:active {
    transform: translateY(12px);
    box-shadow: 0 0 0 #e03131, 0 0 5px rgba(0, 0, 0, 0.2);
}

.status-message {
    text-align: center;
    min-height: 20px;
    font-size: 1rem;
    color: white;
    /* On orange bg */
    font-weight: bold;
    margin-top: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}