.toolbar {
    grid-area: toolbar;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    z-index: 20;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.toolbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    border-right: 1px solid var(--border-subtle);
    margin-right: 4px;
}

.toolbar-logo {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), #a78bfa);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.toolbar-logo svg { width: 14px; height: 14px; stroke: white; fill: none; stroke-width: 2.5; }
.toolbar-title { font-size: 13px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; }

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-separator {
    width: 1px;
    height: 24px;
    background: var(--border-subtle);
    margin: 0 8px;
}

.toolbar-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast);
    position: relative;
}

.toolbar-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.toolbar-btn.active { background: var(--accent-dim); color: var(--accent-hover); }
.toolbar-btn:disabled { opacity: 0.3; pointer-events: none; }
.toolbar-btn svg { width: 16px; height: 16px; }
.toolbar-btn[title]::after {
    content: attr(title);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast);
    z-index: 100;
    margin-top: 4px;
}
.toolbar-btn:hover[title]::after { opacity: 1; }

.toolbar-play {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-normal) var(--ease);
    box-shadow: 0 2px 8px var(--accent-glow);
}
.toolbar-play:hover { background: var(--accent-hover); transform: scale(1.05); }
.toolbar-play svg { width: 14px; height: 14px; fill: white; stroke: none; }

.speed-group {
    display: flex;
    gap: 1px;
    background: var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.speed-btn {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-primary);
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--dur-fast);
    font-family: var(--font-mono);
}
.speed-btn:hover { color: var(--text-secondary); background: var(--bg-hover); }
.speed-btn.active { background: var(--accent-dim); color: var(--accent-hover); }

.time-display {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.toolbar-spacer { flex: 1; }

.toolbar-export-btn {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--dur-normal) var(--ease);
    font-family: var(--font);
}
.toolbar-export-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,255,255,0.1); }
.toolbar-export-btn svg { width: 12px; height: 12px; }