/* Header */
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.app-header .left { display: flex; align-items: center; gap: 10px; }
.app-header .center { color: var(--muted); font-size: 14px; }
.app-header .right { display: flex; align-items: center; gap: 8px; }
.header-logo { height: 28px; width: auto; display: block; }
.app-name { font-weight: 700; color: var(--primary); }

/* Header buttons */
.app-header .right .btn { 
  text-decoration: none; /* remove underline from <a> */
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: background .2s ease, box-shadow .2s ease, transform .08s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.app-header .right .btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  color: #dce7ff;
}
.app-header .right .btn-secondary:hover { 
  background: linear-gradient(180deg, rgba(59,130,246,0.18), rgba(59,130,246,0.06));
  box-shadow: 0 2px 8px var(--primary);
}
.app-header .right .btn-secondary:active { transform: translateY(1px); }

.app-header .right .btn-ghost {
  color: #94a3b8;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
}
.app-header .right .btn-ghost:hover { 
  color: #e2e8f0; 
  background: rgba(255,255,255,0.04); 
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* Small buttons used in tiles can inherit these but keep their sizing there */
.btn.btn-xs { padding: 4px 8px; border-radius: 8px; }