/* Header Styles */
.header {
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, transparent), color-mix(in srgb, var(--card) 97%, transparent));
  border-bottom:1px solid var(--line);
  padding:24px 32px;
}

.header-content {
  max-width:1400px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.header h1 {
  margin:0;
  font-size:24px;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:12px;
}

.header h1 .logo-dot {
  width:12px;
  height:12px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
}

.header .status {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.header-actions {
  display:flex;
  align-items:center;
  gap:12px;
}

.header-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:8px;
  background:color-mix(in srgb, var(--card) 90%, transparent);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  transition:all 0.2s ease;
  cursor:pointer;
}

.header-btn:hover {
  background:color-mix(in srgb, var(--brand) 20%, transparent);
  border-color:var(--brand);
  color:var(--brand);
  transform:translateY(-1px);
}

.header-btn:disabled {
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
}

.header-btn.settings {
  background:color-mix(in srgb, var(--brand) 15%, transparent);
  border-color:var(--brand);
  color:var(--brand);
}

.header-btn.settings:hover {
  background:color-mix(in srgb, var(--brand) 25%, transparent);
  transform:translateY(-2px);
  box-shadow:0 2px 8px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* Special hover effects */
.docker-build-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(14,165,233,0.4)!important;
}

.docker-deploy-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(16,185,129,0.4)!important;
}