#toolbar {
    grid-column: 1 / -1;
    grid-row: 2;
    background-color: var(--toolbar-bg);
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
}

.tool-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: var(--ui-surface);
    padding: 4px;
    border-radius: 6px;
}

.tool-btn, .subtool-btn {
    background-color: transparent;
    border: none;
    color: var(--ui-text-muted);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-family: inherit;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tool-btn svg {
    width: 20px;
    height: 20px;
}

.tool-btn:hover, .subtool-btn:hover {
    background-color: var(--ui-surface-hover);
    color: var(--ui-text);
}

.tool-btn.active, .subtool-btn.active {
    background-color: var(--accent);
    color: white;
    box-shadow: 0 0 10px var(--accent);
}

.toolbar-spacer {
    flex-grow: 1;
}

#toolbar-actions button {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
}

#toolbar-actions button:hover {
    background-color: var(--ui-surface-hover);
}

#toolbar-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#player-position-select {
    background-color: var(--ui-surface-hover);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    padding: 4px 8px;
    border-radius: 4px;
}
. f o r m a t - s e l e c t   {   b a c k g r o u n d :   v a r ( - - u i - b g ) ;   c o l o r :   v a r ( - - u i - t e x t ) ;   b o r d e r :   1 p x   s o l i d   v a r ( - - u i - b o r d e r ) ;   p a d d i n g :   4 p x   8 p x ;   b o r d e r - r a d i u s :   4 p x ;   f o n t - w e i g h t :   b o l d ;   c u r s o r :   p o i n t e r ;   }  
 . f o r m a t - s e l e c t   o p t i o n [ v a l u e = ' 5 v 5 ' ]   {   c o l o r :   # 0 0 8 0 8 0 ;   }   . f o r m a t - s e l e c t   o p t i o n [ v a l u e = ' 6 v 6 ' ]   {   c o l o r :   # 1 a 5 6 d b ;   }   . f o r m a t - s e l e c t   o p t i o n [ v a l u e = ' 7 v 7 ' ]   {   c o l o r :   # 8 0 0 0 8 0 ;   }   . f o r m a t - s e l e c t   o p t i o n [ v a l u e = ' 1 1 v 1 1 ' ]   {   c o l o r :   # 8 b 0 0 0 0 ;   }  
 #quick-actions-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--ui-surface);
  padding: 4px;
  border-radius: 6px;
}

.quick-action-btn {
  background-color: #2a2a4a;
  border: 1px solid #444466;
  color: #ccccdd;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
}

.quick-action-btn:hover:not(:disabled) {
  background-color: #3a3a6a;
  color: #ffffff;
  border-color: #5555aa;
}

.quick-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quick-action-btn.active {
  background-color: #5555aa;
  color: #ffffff;
  border-color: #7777cc;
  box-shadow: 0 0 8px rgba(85, 85, 170, 0.4);
}
