.ara-mixer {
    background: #2f3640;
    color: #dcdde1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ara-tracks-container { padding: 15px; flex: 1; }

.ara-row { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; }
.ara-label { width: 120px; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ara-controls { flex: 1; display: flex; align-items: center; gap: 5px; }

/* Метры */
.ara-meter-wrapper { width: 12px; height: 30px; background: #1a1a1a; display: flex; flex-direction: column-reverse; gap: 1px; padding: 2px; }
.meter-segment { width: 100%; height: 2px; background: #3d4652; }
.meter-segment.on { background: #44bd32; }

/* Кнопки */
.btn-toggle { padding: 8px; border: none; border-radius: 4px; background: #485460; color: white; cursor: pointer; font-size: 0.7rem; flex: 1; }
.btn-toggle.active { background: #e1b12c; color: #1e272e; }
.btn-mute.active { background: #c23616; color: white; }

/* ПРИЛИПАЮЩИЙ ТРАНСПОРТ */
/* Основная панель - вертикальный стек */
.ara-transport {
    position: sticky;
    bottom: 0;
    background: #1a1a1a;
    padding: 10px 15px;
    display: flex;
    flex-direction: column; /* Таймлайн над кнопками */
    gap: 5px;
    border-top: 1px solid #485460;
    z-index: 10;
}

/* Контейнер для кнопок - горизонтальная строка */
.ara-controls-row {
    display: flex;
    flex-direction: row; /* Кнопки в ряд */
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* Таймер теперь не улетит, так как он внутри controls-row */
.ara-timer {
    font-size: 1.4rem;
    margin-left: auto; /* Прижать время к правому краю */
    min-width: 80px;
    text-align: right;
	font-variant-numeric: tabular-nums; /* Делает все цифры одинаковой ширины */
    font-family: var(--font-main);
}

.btn-main { flex: 1; padding: 12px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
.btn-start { background: #44bd32; color: white; }
.btn-start.playing { background: #1e8449; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
.btn-pause { background: #0097e6; color: white; }
.btn-stop { background: #c23616; color: white; }
.ara-timer { font-family: monospace; font-size: 1.4rem; min-width: 80px; text-align: right; }

/* Контейнер для всей области таймлайна */
.ara-timeline {
    padding: 0 5px 10px 5px;
    width: 100%;
}

/* Контейнер для букв (A, B, C...) */
.ara-markers-container {
    position: relative;
    height: 25px; /* Высота для плашек с буквами */
    margin-bottom: 5px;
}

/* Сами плашки меток */
.ara-marker {
    position: absolute;
    transform: translateX(-50%);
    background: #fff;
    color: #1a1a1a;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #0097e6;
    z-index: 5;
    user-select: none;
}
.ara-marker:hover { background: #f1c40f; }

/* Ползунок времени (Seekbar) */
.ara-seekbar {
    width: 100%;
    height: 6px;
    cursor: pointer;
    accent-color: #0097e6;
    margin: 0;
}