/* Haupt-Container */
#cube-timer-app {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.dark #cube-timer-app {
    background-color: #2a2a2a;
    border-color: #444;
}

/* Scramble-Display */
#scramble-display {
    font-family: "Courier New", Courier, monospace;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f0f0f0;
    border-radius: 5px;
    line-height: 1.5;
    user-select: none;
}
.dark #scramble-display {
    background-color: #333;
    color: #eee;
}


/* Timer-Display */
.timer-display {
    font-size: 4rem;
    font-weight: 600;
    font-family: "Courier New", Courier, monospace;
    text-align: center;
    padding: 30px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    user-select: none;
    outline: none;
}

.dark .timer-display {
    background-color: #1e1e1e;
    border-color: #555;
    color: #eee;
}

/* Zustände für das Timer-Display */
.timer-display.ready {
    background-color: #fff0f0;
    color: #d00;
}
.dark .timer-display.ready {
    background-color: #4a2d2d;
    color: #ff8a8a;
}
.timer-display.running {
    background-color: #f0fff0;
    color: #0a0;
}
.dark .timer-display.running {
    background-color: #2d4a2d;
    color: #8aff8a;
}

/* Statistik-Grid */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.stats-grid > div {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
    
    /* *** NEU: Flexbox-Regeln für die Ausrichtung *** */
    display: flex;
    justify-content: space-between; /* Verteilt Kinder (Label links, Wert rechts) */
    align-items: center; /* Zentriert vertikal */
}
.dark .stats-grid > div {
    background-color: #333;
}

/* *** NEU: Schriftart der Statistik-Werte anpassen *** */
.stats-grid > div > span {
    font-family: "Courier New", Courier, monospace;
    font-weight: 600; /* Hebt den Wert hervor */
}


/* Buttons */
.timer-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.timer-controls button {
    padding: 10px 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    background-color: #fff;
    flex: 1; /* Erzwingt gleiche Breite */
}
.dark .timer-controls button {
    background-color: #444;
    border-color: #666;
    color: #eee;
}
.timer-controls button:hover {
    background-color: #eee;
}
.dark .timer-controls button:hover {
    background-color: #555;
}

/* Style für "Letzte löschen" */
#btn-delete-last {
    background-color: #fef0d8;
    border-color: #e6c085;
}
.dark #btn-delete-last {
     background-color: #5a4a2d;
    border-color: #8a7a4d;
}

/* Style für "Clear History" */
#btn-clear {
    background-color: #fdd;
    border-color: #d99;
}
.dark #btn-clear {
     background-color: #5a2d2d;
    border-color: #8a4d4d;
}

/* Zeiten-Matrix */
#times-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Spalten */
    gap: 4px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background-color: #f0f0f0;
}
.dark #times-grid {
    background-color: #2a2a2a;
    border-color: #444;
}

/* Einzelne Zelle in der Matrix */
.time-cell {
    font-family: "Courier New", Courier, monospace;
    font-size: 1rem; /* Etwas vergrößert, da 5 Spalten mehr Platz bieten */
    padding: 5px 0;
    background-color: #fff;
    border-radius: 3px;
    text-align: right;
    padding-right: 4px;
    white-space: nowrap; 
    overflow: hidden;
}
.dark .time-cell {
    background-color: #1e1e1e;
}

/* Leere Zellen ('-') stylen */
.time-cell.empty {
    color: #aaa;
    background-color: #f9f9f9;
    text-align: center;
    padding-right: 0;
}
.dark .time-cell.empty {
    color: #666;
    background-color: #222;
}

.time-cell.colored-time {
    font-weight: 600;
    color: hsl(var(--time-hue, 0), 60%, 35%); 
}

.dark .time-cell.colored-time {
    color: hsl(var(--time-hue, 0), 70%, 65%);
}