/* =========================================================================
 * Header — framework base: layout + static colors/fonts + buttons.
 *
 * Animations (blinking separator, cursor, glitch, neon flicker) live in
 * the DEFAULT `header.style` (config.js) so they're user-editable in
 * Settings → Header → CSS. Clear that pane to remove all animation.
 * ========================================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background:
    linear-gradient(135deg,
      rgba(17,18,23,0.9)  0%,
      rgba(25,45,55,0.9)  50%,
      rgba(17,18,23,0.9)  100%);
  background-size: 200% 200%;
  animation: header-gradient 12s ease infinite;
  border-bottom: 1px solid var(--u-border-accent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@keyframes header-gradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
}

.header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  font-family: var(--u-mono);
  color: var(--u-text);
  letter-spacing: 2.5px;
  user-select: none;
}

/* Title part colors / weights (static, no animation here) */
.title-bracket { color: var(--u-text-dim); font-weight: 300; }
.title-erratic {
  color: var(--u-accent);
  font-weight: 700;
  letter-spacing: 3.5px;
  text-shadow: 0 0 10px var(--u-accent-glow), 0 0 20px rgba(79,193,201,0.15);
}
.title-dot    { color: #d4915e; }
.title-dc     { color: var(--u-text-dim); font-weight: 300; letter-spacing: 4.5px; font-size: 17px; }
.title-cursor { color: var(--u-accent); }

.logo-img { display: block; max-height: 36px; width: auto; height: auto; }

.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn {
  font-family: var(--u-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--u-text);
  background: #181b1f;
  border: 1px solid #2a2d32;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn:hover        { border-color: var(--u-accent); color: #fff; }
.btn:active,
.btn.is-pressed  { border-color: var(--u-accent); color: var(--u-accent); }
.btn-icon        { padding: 5px 11px; font-size: 16px; line-height: 1; }

@media (max-width: 768px) {
  .header-row    { padding: 12px 14px; flex-direction: column; gap: 12px; align-items: stretch; }
  .header h1     { font-size: 16px; letter-spacing: 1.5px; text-align: center; }
  .title-erratic { letter-spacing: 2.5px; }
  .title-dc      { font-size: 13px; letter-spacing: 2.5px; }
  .controls      { justify-content: center; }
}