/* tools/base64/css/style.css */

/* Action bar */
#action-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: #1e1e2e; border-bottom: 2px solid #45475a;
}
#action-buttons { display: flex; gap: 6px; }
#action-buttons button {
  background: #313244; color: #cdd6f4; border: 1px solid #45475a;
  border-radius: 4px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
#action-buttons button:hover { background: #45475a; }
#btn-encode { background: #89b4fa; color: #1e1e2e; border-color: #89b4fa; font-weight: 600; }
#btn-encode:hover { background: #74c7ec; border-color: #74c7ec; }
#btn-decode { background: #a6e3a1; color: #1e1e2e; border-color: #a6e3a1; font-weight: 600; }
#btn-decode:hover { background: #94d3a2; border-color: #94d3a2; }
#status-badge { font-size: 13px; padding: 4px 12px; border-radius: 4px; }
#status-badge.success { color: #a6e3a1; }
#status-badge.error { color: #f38ba8; }

/* Main area */
#main {
  display: flex; flex: 1; min-height: 0;
  position: relative;
}

/* Panes */
#text-pane,
#base64-pane {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
#text-pane { border-right: none; }

.pane-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; background: #181825; font-size: 12px; color: #6c7086;
  border-bottom: 1px solid #313244; text-transform: uppercase; letter-spacing: 0.05em;
}

#text-pane textarea,
#base64-pane textarea {
  flex: 1; background: #1e1e2e; color: #cdd6f4; border: none; outline: none;
  padding: 12px; font-family: 'Fira Code', monospace; font-size: 13px;
  line-height: 1.6; resize: none; white-space: pre; overflow: auto;
}
#base64-pane textarea { border-left: 2px solid #45475a; }

/* Active pane highlight */
#text-pane.active-pane { border-bottom: 2px solid #89b4fa; }
#base64-pane.active-pane textarea { border-left-color: #a6e3a1; }

/* Error messages below panes */
.pane-error {
  min-height: 20px; padding: 4px 12px; font-size: 12px; color: #f38ba8;
  background: #1e1e2e; border-top: 1px solid #313244; font-family: monospace;
  white-space: pre-wrap; display: none;
}
.pane-error:not(:empty) { display: block; }

/* Direction indicator between panes */
#direction-indicator {
  display: flex; align-items: center; justify-content: center;
  width: 80px; flex-shrink: 0;
  background: #181825;
  border-left: 2px solid #45475a;
  border-right: 2px solid #45475a;
  position: relative;
  z-index: 1;
}
#direction-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px; color: #6c7086; letter-spacing: 0.08em;
  user-select: none;
  transform: rotate(180deg);
}
#direction-label.encoding { color: #89b4fa; }
#direction-label.decoding { color: #a6e3a1; }