body { background-color: #121212; color: white; font-family: sans-serif; margin: 0; display: flex; justify-content: center; }
.app-container { width: 1100px; text-align: center; padding: 20px; }
h1 { font-size: 32px; margin-bottom: 10px; }
.toolbar { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
select, button { padding: 10px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; }
button { background: #444; color: white; }
.btn-blue { background: #1976D2; }
.btn-amber { background: #FF8F00; }
.btn-red { background: #D32F2F; }
.loader { height: 4px; background: #1976D2; width: 400px; margin: 10px auto; }

.main-layout { display: flex; justify-content: center; gap: 20px; align-items: flex-start; margin-top: 20px; }
.grid { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 8px; background: #1e1e1e; padding: 10px; border: 1px solid #333; border-radius: 10px; }
.tile { width: 100px; height: 100px; background: #1565C0; display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: bold; border-radius: 10px; transition: 0.2s; }
.tile.empty { background: #2c2c2c; }
.tile.solved { background: #2E7D32; }

.stats-section { width: 250px; text-align: left; }
.section-title { font-size: 14px; margin-bottom: 5px; }
.blue { color: #2196F3; }
.orange { color: #FF9800; }
.blue-bold { color: #2196F3; font-weight: bold; }
.status-ready { font-size: 18px; font-weight: bold; margin: 10px 0; }
.stat-item { font-size: 14px; margin: 5px 0; }
.stat-label { font-size: 12px; color: grey; margin-top: 10px; }
.stat-path { color: #FFB300; font-weight: bold; font-size: 16px; word-break: break-all; }

.divider { width: 1px; background: #333; align-self: stretch; margin: 0 10px; }
.history-section { width: 300px; text-align: left; }
.history-list { height: 450px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.history-item { background: rgba(255,255,255,0.05); border: 1px solid #444; padding: 10px; border-radius: 8px; }

/* Kontejner pro obě mřížky */
.boards-container {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    justify-content: center;
}

/* Styl pro malou cílovou mřížku */
.target-board-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.target-label {
    font-size: 12px;
    font-weight: bold;
    color: #4CAF50;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.target-grid {
    display: grid;
    grid-template-columns: repeat(3, 35px);
    grid-gap: 4px;
    background: #1a1a1a;
    padding: 6px;
    border: 2px solid #2E7D32;
    border-radius: 8px;
}

.target-tile {
    width: 35px;
    height: 35px;
    background: #2E7D32;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
}

.target-tile.empty {
    background: #121212;
}